Fonctionnalité n°1 : les variables
Diverses classes CSS peuvent contenir la ou les mêmes règles dans un projet. Par exemple, nous avons 20 boîtes sur notre page web avec différentes couleurs de fond:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Plus tard, notre client change d’avis et veut des boîtes plus grandes. Je dois donc augmenter les propriétés width et height de chaque classe, une par une. Cela pourrait aussi être 50 classes. Dans la programmation de la vie réelle, cela peut être frustrant. Comme je l’ai mentionné ci-dessus, c’est un exemple de gros efforts pour de petits changements.
Comment pouvons-nous le faire plus efficacement ?
Sass fournit une solution : les variables. Comme dans d’autres langages de programmation, nous pouvons utiliser des variables pour stocker des valeurs et les réutiliser plus tard.
Définition d’une variable :
$variable-name: value;
Pour revenir à l’exemple ci-dessus, si nous définissons des variables pour width & height :
$box-width: 100px;
$box-height: 100px;
plus tard, lorsqu’un changement est nécessaire, il suffit de changer leurs valeurs une fois :
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
CSS lui-même supporte également les variables maintenant, mais il ne fonctionne pas dans IE & anciennes versions des autres navigateurs :
Fonctionnalité #2 : Emboîtement
La CSS standard ne supporte pas l’emboîtement. Nous ne pouvons pas écrire une classe à l’intérieur d’une autre classe. Au fur et à mesure que le projet grossit, cela apporte un problème de lisibilité et la structure n’a pas l’air agréable.
Par exemple, définissons un menu de navigation avec des liens cliquables en HTML ci-dessous :
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Le HTML supporte le code imbriqué. Cependant sans imbrication, ils ressemblent à ceci en CSS:
Nous avons dû écrire nav pour chaque balise, même pour la pseudo-classe de l’ancre (hover) car nav est la balise parente de toutes. Sass cependant, supporte l’imbrication:
Ici nous pouvons écrire un code mieux structuré comme en HTML. Nous n’avons pas besoin d’écrire nav classe après classe, ce qui empêche également la redondance
Important : Il n’est pas recommandé d’imbriquer les classes plus profondément que 3 niveaux.
Fonctionnalité #3 : Mixins
Nous avons appris ci-dessus comment utiliser des variables pour les règles CSS. Mais que faire si nous avons besoin d’utiliser un groupe de règles ensemble ? Sass a une fonctionnalité appelée mixins, nous permettant de le faire.
Qu’est-ce qu’un mixin ?
Les mixins sont des fonctions Sass qui regroupent des déclarations CSS ensemble. Nous pouvons les réutiliser plus tard comme des variables.
Nous pouvons créer un mixin avec la commande @ mixin, suivie d’un nom :
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
ou nous pouvons créer un mixin comme une fonction et ajouter des paramètres également :
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Après avoir créé le mixin, nous pouvons l’utiliser dans n’importe quelle classe avec la commande @ include. Ainsi, nous pouvons utiliser le mixin my-font au lieu de 4 lignes de règles de police à chaque fois. Cette approche simplifie le code.
p {
@include my-font;
}
L’utilisation des mixins est un bon moyen d’éviter la redondance du code.
Fonctionnalité #4 : les importations
Enfin, nous pouvons couper nos énormes fichiers CSS en plus petits morceaux avec la fonctionnalité d’importation de Sass. Il est beaucoup plus facile de lire & maintenir des fichiers plus petits plutôt qu’un gros fichier avec des lignes sans fin.
En fait, CSS a aussi maintenant une fonctionnalité d’importation. Mais elle fonctionne différemment. CSS envoie une requête HTTP au serveur à chaque fois pour importer un fichier. Sass le fait sans requête HTTP, ce qui est une approche plus rapide.
Tout ce que vous avez à faire est d’importer votre fichier Sass avec la commande @ import vers un autre fichier Sass:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
On n’a pas besoin d’utiliser les extensions .scss dans le chemin du fichier, Sass le comprendra.