➡️ 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.

1. What are Sass modules

2. 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.

🔗 More information

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, use styles.[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.

1. Qu'est ce que Sass modules

2. 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.

🔗 Plus d'informations

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