➡️ In this article, how to use sass modules in a react project with global variables.
Article in English ✒️
Introduction 📁
Sass uses variables that are not globally accessible in styles because the code is compiled into CSS (a Sass variable does not become a CSS variable), for example:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
(sass compile)
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Unlike CSS, which uses variables that can be found throughout the stylesheets, for example:
:root {
--main-bg-color: blue;
}
.element{
background-color: var(--main-bg-color);
}
In this tutorial, we'll review what Sass modules or CSS modules are, and then I'll explain how to define and use a global variable.
What are Sass modules
Defining a global Sass variable
Part 1 : What are Sass modules 🧩
Css or Sass modules allow you to define styles that will only be loaded if the element in question is used. Also, the classes will have a unique name, avoiding conflicts with other classes of the same name.
Usage
- First, create a Button folder and add ar
.tsx
or.jsx
file and a[name].modules.scss
file.
Button/
index.tsx
index.modules.scss
- Then, in your Sass modules file, define your style with your classes.
.button {
background-color: blue;
}
- Finally, in your
.tsx
or.jsx
file, import your scss file by defining a style variable. To use it, usestyles.[variable name]
➡️ Link Doc.
import styles from './index.module.scss' //file sass modules
import { useState } from 'react'
export default function Button() {
const [count, setCount] = useState(0)
return (
<button
className={styles.button}
onClick={() => setCount((count) => count + 1)}
>
count is {count}
</button>
)
}
Defining a global Sass variable 🌐
- First, create a sass folder with your files to be reused globally. Don't forget the
_
in your filename, for example:_variables.scss
.
sass/
_variables.scss
_mixins.scss
_global.scss
- Define your variables and mixins.
_variables.scss
$color: blue;
$breakpoints: (
sm: 576px,
);
_mixins.scss
@use 'variables';
@mixin sm {
@media (max-width: map-get(variables.$breakpoints, sm)) {
@content;
}
}
- In the
_global.scss
file, put:
@forward './variables';
@forward './mixins';
- In the
vite.config.ts
file, add:
export default defineConfig({
plugins: [react()],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "./src/sass/_global.scss" as global;
`,
},
},
},
})
- To use your variables, put global in front of what you want to use.
.button {
background-color: global.$color;
@include global.sm {
text-align: center;
}
}
➡️ That's it! No need to import your variables or mixins into each module.
🎉 Thank you for reading to the end!
🤩 If you found this helpful please consider subscribing and following.
📕 You can browse my blog to discover other topics that interest you.
➡️ blog.tomwebdev.fr
🌐 To learn more about me, visit my website.
➡️ tomwebdev.fr
Article en Français ✒️
Introduction 📁
Sass utilise des variables qui ne sont pas accessibles de manière global dans le style car le code est compilé en CSS (une variable Sass ne se transforme pas en variable CSS), exemple :
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
(sass compile)
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Contrairement au CSS qui utilise des variables qui peuvent être retrouvés dans l'ensemble des feuilles de style, exemple :
:root {
--main-bg-color: blue;
}
.element{
background-color: var(--main-bg-color);
}
Dans ce tutoriel, nous ferons un rappel sur ce qu'est Sass modules ou Css modules et ensuite je vous expliquerai comment définir une variable global et l'utiliser.
Qu'est ce que Sass modules
Définir une variable Sass global
Part 1 : Qu'est ce que Sass modules 🧩
Les modules Css ou Sass permettent de définir du styles qui sera chargé que si l'élément en question est utilisé, également les class auront un nom unique ce qui évite le conflit avec d'autre class de même nom.
Utilisation
- Dans un premier temps créer un dossier Button et ajoutez un fichier
.tsx
ou.jsx
et un fichier[name].modules.scss
➡️ Lien Doc.
Button/
index.tsx
index.modules.scss
- Ensuite dans votre fichier Sass modules, vous définissez votre style avec vos class.
.button {
background-color: blue;
}
- Pour finir dans votre fichier .tsx ou .jsx, vous importez votre fichier scss en définissant une variable style. Pour l'utiliser
styles.[variable name]
.
import styles from './index.module.scss' //file sass modules
import { useState } from 'react'
export default function Button() {
const [count, setCount] = useState(0)
return (
<button
className={styles.button}
onClick={() => setCount((count) => count + 1)}
>
count is {count}
</button>
)
}
Définir une variable Sass global 🌐
- Tout d'abord créer un dossier sass avec vos fichier à réutiliser de manière global. Ne pas oublier
_
dans votre nom de fichier, exemple:_variables.scss
sass/
_variables.scss
_mixins.scss
_global.scss
- Définissez vos variables et mixins
_variables.scss
$color: blue;
$breakpoints: (
sm: 576px,
);
_mixins.scss
@use 'variables';
@mixin sm {
@media (max-width: map-get(variables.$breakpoints, sm)) {
@content;
}
}
- Dans le fichier
_global.scss
mettre :
@forward './variables';
@forward './mixins';
- Dans le fichier
vite.config.ts
rajouter :
export default defineConfig({
plugins: [react()],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "./src/sass/_global.scss" as global;
`,
},
},
},
})
- Pour utiliser vos variables, mettre global devant ce que vous souhaitez utiliser.
.button {
background-color: global.$color;
@include global.sm {
text-align: center;
}
}
➡️ C'est tout ! Pas besoin d'importer vos variables ou mixins dans chaques modules.
🎉 Merci d'avoir lu jusqu'au bout !
🤩 Si vous avez trouvé cela utile, pensez à vous abonner et à me suivre.
📕 Vous pouvez parcourir mon blog pour découvrir d'autres sujets qui vous intéressent.
➡️ blog.tomwebdev.fr
🌐 Pour en savoir plus sur moi, visitez mon site Web.
➡️ tomwebdev.fr