L’indicateur `!default` dans SASS

Cet article explique le drapeau !default dans SASS.

Nous allons expliquer en détail le drapeau !default et montrer comment l’utiliser avec des exemples pratiques.

YouTube Video

L’indicateur !default dans SASS

L’indicateur !default dans SASS est un outil important pour améliorer la modularité et la réutilisabilité des feuilles de style. En utilisant cet indicateur, vous pouvez définir des valeurs par défaut pour les variables tout en permettant à des valeurs définies ailleurs de prévaloir. Ici, nous allons expliquer en détail l’indicateur !default et démontrer son utilisation avec des exemples pratiques.

L’indicateur !default est une fonctionnalité spécifique à SASS utilisée pour définir des valeurs par défaut pour les variables. En ajoutant cet indicateur, le comportement suivant est obtenu :.

• Spécification des valeurs par défaut La valeur n’est fixée que si la variable n’est pas définie ailleurs.

• Contrôle de la priorité Si la variable est déjà définie, sa valeur ne sera pas écrasée.

Cette fonctionnalité est particulièrement utile lors de la création de modules et de bibliothèques. Les utilisateurs peuvent définir des valeurs personnalisées, mais si aucune n’est spécifiée, les valeurs par défaut seront utilisées.

Exemple de base

Le code suivant montre l’utilisation de base de l’indicateur !default.

1// _variables.scss
2$primary-color: blue !default;

• Définir la variable par défaut $primary-color en utilisant le drapeau !default.

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• Importer des variables avec @use et redéfinir $primary-color avec with.

CSS généré

1body {
2    background-color: red;
3}

• Dans cet exemple, comme $primary-color est défini sur red dans main.scss, la valeur blue définie dans _variables.scss ne sera pas utilisée.

Quand une variable n’est pas définie

Si la variable n’est pas définie dans main.scss, la valeur par défaut sera utilisée.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• Comme la variable est importée sans redéfinition, la valeur par défaut blue de $primary-color définie dans _variables.scss est appliquée.

CSS généré

1body {
2    background-color: blue;
3}

Utilisation dans les modules imbriqués

L’utilisation de !default dans les modules permet une personnalisation flexible.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• Définir $primary-color et $button-color avec le drapeau !default.

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• Importer le module variables et spécifier la couleur de .button en utilisant la variable $button-color.

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• Utiliser @use avec with pour redéfinir $button-color par orange, et utiliser le module buttons.

CSS généré

1.button {
2    color: orange;
3}

• De cette façon, les modules fournissent des valeurs par défaut tout en respectant les paramètres définis par l’utilisateur.

Points à noter

Lors de l’utilisation de l’indicateur !default, les points suivants doivent être pris en compte :.

• Choisir les bonnes valeurs par défaut Les valeurs par défaut doivent être choisies pour couvrir les cas d’utilisation courants.

• Conception intentionnelle Utilisez des noms de variables cohérents et évitez les conflits avec d’autres modules.

• Vérification de l’ordre Pour que l’indicateur !default fonctionne comme prévu, l’ordre des surcharges de variables doit être correctement géré.

Cas pratiques

Changement de thème

Par exemple, lors de la création d’une bibliothèque prenant en charge les thèmes, vous pouvez utiliser !default pour fournir des valeurs par défaut personnalisables.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• Définir $background-color et $text-color avec le drapeau !default pour le thème, et les appliquer au body.

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• Personnaliser le thème en redéfinissant $background-color avec @use et with.

CSS généré

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Composants réutilisables

Dans un composant bouton réutilisable, vous pouvez fournir des styles par défaut tout en permettant aux utilisateurs d’outrepasser la couleur.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• Définir les couleurs de fond et de texte par défaut pour les boutons avec !default et appliquer les styles.

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• Personnaliser la couleur du bouton en redéfinissant $button-bg avec @use et with.

CSS généré

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Résumé de l’indicateur !default

L’indicateur !default dans SASS est un outil puissant pour la conception de modules et de bibliothèques. Il améliore la réutilisabilité tout en permettant une personnalisation flexible.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video