Importation
Afin de simplifier la maintenance des CSS, SASS permet de découper le fichier en sous-fichiers.
Un seul fichier CSS sera généré à partir de tous les fichiers SCSS.
Méthode : use
Tous les fichiers avec l'extension SCSS génèrent automatiquement un fichier CSS. Sauf, si ce fichier commence par le caractère underscore ("_").
Ouvrez un fichier _base.scss dans votre dossier SCSS et tapez le contenu :
body {color: #000;
}
Dans le fichier style.scss utilisez la directive @use
@use 'base';
Méthode : fichier de variables
Si un fichier _variables.scss contient des variables vous pouvez y faire appel avec @use.
Mais les variables appartiennent à l 'espace de nom (NameSpace) du nom du fichier.
C'est à dire ici variables. Pour appeler une variable du fichier vous devez faire précéder chaque variable du NameSpace.
@use 'variables';
body {color: variables.$color;
}
Pour simplifier, vous pouvez créer un alias au NameSpace.
@use 'variables' as var;
body {color: var.$color;
}
Pour éviter de mettre un NameSpace remplacez l'alias par *.
@use 'variables' as *;
body {color: $color;
}
Méthode : forward
Si vous avez plusieurs fichiers à intégrer vous devez multiplier vos directives @use au début de tous vos fichiers
@use 'variables-color' as *;
@use 'variables-size' as *;
@use 'variables-font' as *;
Si vous avez plusieurs fichiers qui doivent intégrer les mêmes directives @use.
Vous pouvez passer par un fichier commun qui utilisera la directive @forward à la place de @use.
_global.scss :
@forward 'variables-color';
@forward 'variables-size';
@forward 'variables-font';
_base.scss :
@use 'global';
body {color: $color;
}
style.scss :
@use 'base';