Gagnez du temps dans l’intégration de vos sites en CSS grâce à Sass (Syntactically Awesome StyleSheets) !
Sass c’est quoi ?
C’est un préprocesseur CSS qui permet d’étendre le langage CSS. Les fichiers sont enregistrés sous l’extension .scss ou .sass. Ils sont ensuite compilés par Ruby qui générera les fichiers en .css, seul format que les navigateurs interprètent.
Site officiel : https://sass-lang.com
Étendre le langage CSS ? Concrètement ?
Sass apporte des fonctionnalités supplémentaires telles que :
Les variables
Elles permettent de stocker des informations qu’il sera possible de réutiliser dans le document.
Exemple :
/*Déclaration de la variable* /
$maCouleur : #c3c3c3 ;
/*Réutilisation de la variable*/
body{
background-color : $maCouleur ; }
Il est même possible de stocker ces variables dans des fichiers séparés, puis de les importer dans le fichier souhaité.
Les opérations mathématiques et les fonctions prédéfinies
Il est possible de faire effectuer des calculs, et cela même sur les couleurs !
Exemple :
h1{
color:lighten(rgb(163,217,0),50%); }
Les mixins
Les mixins sont des portions de codes CSS définies, puis réutilisées dans le fichier avec possibilité de passer des paramètres à la « fonction ».
Exemple :
/*Définition du mixin*/
@mixin encadre($size){
border: $size solid black; }
/*Réutilisation de la mixin*/
article{
@include encadre(1px); }
L’héritage
Cela permet de réutiliser les styles d’un autre sélecteur.
Exemple :
p{
color: black; }
div{
@extend p;
border:1px solid black; }
L’encapsulation
Elle permet de définir des styles aux enfants directement dans le sélecteur parent.
Exemple :
section{
font-size:1.5em;
> h1{
font-weight:700;}
}
au lieu de :
section{
font-size:1.5em; }
section > h1{
font-weight:700; }
Les boucles et conditions
Il est possible d’utiliser les boucles for,while ou les conditions if (etc.) comme dans les langages de programmation tels que PHP ou Javascript.
Quelle différence entre .sass et .scss ?
L’extension .scss permet simplement de ne pas être obligé de mentionner les accolades et les points-virgules.
Compass, c’est quoi ?
Compass est un framework ; c’est donc une bibliothèque de Sass regroupant des outils supplémentaires et des mixins déjà programmés.
Sass est donc un outil très puissant, qui permet de gagner en productivité, d’autant plus s’il est couplé à un plugin d’éditeur tel que Emmet (https://emmet.io/). Il entraîne tout de même une période d’apprentissage et une bonne maîtrise du langage CSS de base.