À la découverte de SASS
Tu n’as jamais entendu parler de SASS, ou bien très peu mais tu ne sais pas vraiment ce que c’est. Ça tombe bien car j’ai justement envie d’écrire un article pour te faire découvrir ses différentes fonctionnalités à travers des exemples super simples et super rapides à comprendre (Heu enfin je l’espère).
Alors tu pourrais croire que SASS est le nom d’un commando d’élite mais il n’en n’est rien (ou p’tet que si en fait) ! SASS est un métalangage qui permet d’écrire du CSS ! Et comme il n’a pas été créé pour rien, il intègre plein de fonctionnalités comme les variables, les boucles, les tests fonctionnels, etc. pour te faire gagner un maximum de temps dans la création de styles pour tes superbes pages HTML.
SASS est un outil idéal pour les développeurs front-end qui ne passent pas une seule journée sans toucher à au moins une ligne de code CSS, et je parie que c’est ton cas, avoue ! Donc pour bien comprendre ce que je vais écrire en dessous, je te conseille d’avoir une base en CSS, mais je ne m’inquiète pas pour toi, je suis sûr que ça va aller.
prérequis
Pour utiliser SASS, tu vas avoir besoin d’une library, ou d’un logiciel, car le code que tu vas écrire en SASS a besoin d’être compilé pour produire du CSS. Personnellement, je te conseille d’installer Compass, c’est l’idéal pour travailler avec du SASS.
Comment s'en servir
Allez c’est parti, on rentre dans le vif du sujet ! La première chose que je peux déjà te dire par rapport au langage et à la syntaxe, c’est que tu peux l’apprendre de manière progressive, parce que tu peux écrire directement du CSS dans ton code SASS sans utiliser du SASS… (oui très utile) !
Voici un exemple de code SASS et son équivalent en CSS :
/*Version SASS*/
div{
background:black;
p{
color:white;
strong{
font-size:20px;
}
a{
text-decoration:none;
}
}
}
/*Version CSS*/
div{
background:black;
}
div p{
color:white;
}
div p strong{
font-size:20px;
}
div p a{
text-decoration:none;
}
La base, l’héritage
Pour moi, l’un des plus grands avantages de SASS, c’est l’héritage. C’est un mécanisme d’imbrication qui te permet d’écrire du code CSS sous forme de nœud, un peu comme du XML.
Quand tu écris un sélecteur en CSS et que tu ouvres les accolades, tu écris uniquement du code pour l’élément ciblé, et ça s’arrête là… En SASS c’est plus que ça, tu peux en plus cibler des éléments internes au sélecteur courant, et c’est cool car tu n’es pas obligé de réécrire toute la base du sélecteur.
/*Version SASS*/
div p{
color:pink;
strong{
color:blue;
}
a{
text-decoration:none;
span{
font-size:15px;
}
}
}
/*Version CSS*/
div p{
color:pink;
}
div p strong{
color:blue;
}
div p a{
text-decoration:none;
}
div p a span{
font-size:15px;
}
Dans cet exemple en CSS, j’ai écrit « div p » quatre fois alors que dans SASS, ce sélecteur est écrit une seule fois. C’est moins redondant et beaucoup plus lisible. C’est pratique quand il faut reprendre le code d’un autre développeur ou quand tu n’es plus dans le projet depuis un bail.
& puis quoi encore ?
Dans SASS, tu peux utiliser le mot-clé « & » qui va te permettre de cibler le sélecteur dans lequel tu te trouves ! « Quel intérêt puisqu’on est déjà dans l’élément lui-même ? » vas-tu me dire.
Mettons que j’écrive un bloc et que dedans je mette deux paragraphes, et ensuite que je définisse que les paragraphes ont une font-size de 16 pixels.
<!--Code HTML-->
<div>
<p>Voici du texte qui est le contenu du premier paragraphe</p>
<p>Et un second paragraphe</p>
</div>
/*Code SASS*/
div{
p{
font-size:16px;
}
}
Maintenant, je veux colorer un de mes paragraphes en rouge, donc j’ajoute une classe red sur l’un de mes paragraphes. Dans le code SASS, pour attacher la classe au paragraphe, je dois réécrire le sélecteur et ajouter la classe juste derrière.
<!--Code HTML-->
<div>
<p>Voici du texte qui est le contenu du premier paragraphe</p>
<p class="red">Et un second paragraphe</p>
</div>
/*Code SASS*/
div{
p{
font-size:16px;
}
p.red{
color:red;
}
}
Mais moi, je n’ai pas envie de réécrire le sélecteur justement, et toi non plus je parie ! Je vais utiliser le mot-clé « & » qui va me permettre de dire que le code que j’ajoute s’applique directement à l’élément lui-même.
/*Code SASS*/
div{
p{
font-size:16px;
&.red{
color:red;
}
}
}
Les variables
Les variables ! Oui tu ne rêves pas, fini de copier/coller douze mille fois le même code couleur depuis Photoshop. Maintenant, tu vas pouvoir utiliser des variables pour stocker tes données, tu peux même stocker des valeurs en pixel pour tes marges, le nom de tes fonts, le path de ton répertoire image et j’en passe.
La déclaration d’une variable, se fait à l’aide du symbole « $ »
/*Code SASS*/
$color_background:#ccc000;
$defaut_margin_bottom:20px;
body{
div{
background-color:$color_background;
}
.last{
margin-bottom:$defaut_margin_bottom;
}
}
Avec celles-ci, tu vas pouvoir gagner énormément de temps ! Leur principal avantage (et leur but premier) est que tu peux changer leur valeur à tout moment pour modifier l’aspect de ton site, sans devoir repasser dans tout ton fichier.
Les mixins (@mixin)
Tu peux voir les mixins comme une partie ou un ensemble de règles que tu peux appeler où tu veux dans ton fichier SASS. Ça te permet de réutiliser ces mêmes règles un peu partout dans ton code sans devoir les retaper à chaque fois. Typiquement, on dit aussi que ce sont des fonctions.
Alors pour créer un mixin, utilise le mot-clé « @mixin » et donne lui un nom suivi de parenthèses (comme une fonction en PHP par exemple). Ensuite, tu peux lui ajouter des propriétés au choix.
/*Code SASS*/
@mixin boutton(){
font-size:15px;
padding:5px 10px;
color:black;
text-align:center;
}
Pour appliquer/inclure les règles du mixin sur l’élément que je veux, j’utilise le mot-clé « @include » suivi de son nom.
/*Code SASS*/
@mixin boutton(){
font-size:15px;
padding:5px 10px;
color:black;
text-align:center;
}
html{
body{
a.button{
@include boutton();
}
}
}
Ce que je trouve super pratique, c’est de pouvoir réutiliser les mixins plusieurs fois, simplement en ajoutant une seule ligne de code.
Le meilleur exemple que j’ai pu trouver et qui révèle le potentiel des mixins, c’est le fameux border-radius et les différents préfixes super chiants à rajouter.
/*Code SASS*/
@mixin border-radius(){
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
html{
body{
a{
@include border-radius();
}
}
}
Quand j’appelle le mixin, je peux lui envoyer des paramètres afin de modifier le code qui sera généré. Ça permettra de rendre mon super mixin de la mort qui tue plus flexible en pouvant changer la valeur du radius dynamiquement !
Techniquement, comment ça se passe ? J’ajoute simplement une valeur dans les parenthèses du « @include border-radius() » et une variable au niveau du « @mixin border-radius() ». Je peux utiliser cette variable directement à l’intérieur du mixin, c’est exactement la même chose qu’une fonction en PHP ou en JavaScript par exemple.
/*Code SASS*/
@mixin border-radius($valeur_du_radius){
-webkit-border-radius: $valeur_du_radius;
-moz-border-radius: $valeur_du_radius;
border-radius: $valeur_du_radius;
}
html{
body{
a{
@include border-radius(5px);
}
div{
@include border-radius(10px);
}
}
}
Merci
Je te remercie d’avoir pris le temps de faire cette découverte avec moi, et avec un peu de pratique, tu te rendras compte que tu ne pourras plus te passer de cet outil !
21/02/2015
Yann Vangampelaere - nouslesdevs -