Vous en avez marre de devoir surcharger vos feuilles de style ? Vos CSS sont toujours en conflit ? Vous êtes, comme moi, un « toqué » du rangement de fichiers ? Ou vous initiez, tout simplement, un nouveau projet et souhaitez qu’il soit facilement maintenable ? … N’attendez plus et passez chez SASS !

 

SASS, c’est quoi ?

 

Selon notre ami commun Wikipédia :

« Sass est un langage de feuilles de style en cascade (CSS). C’est un langage de description qui est compilé en CSS. SassScript est un langage de script pouvant être utilisé à l’intérieur du code Sass. Deux syntaxes existent. La syntaxe originale, nommée « syntaxe indentée », est proche de Haml. La nouvelle syntaxe se nomme « SCSS ». Elle a un formalisme proche de CSS. »

 

Et c’est bien de la dernière version : le « SCSS » dont nous allons parler. Car il adopte la même syntaxe que le CSS, et est totalement compatible avec celui-ci. A ceci près qu’il va nous permettre bien plus de choses. Créer des « mixins », des fonctions, des variables … et avec un peu de pratique vous pourrez même automatiser la création de classes. Il offre des possibilités sensationnelles (voilà, ça c’est fait…). Bref, vous allez vous amuser et vos projets ne se feront plus jamais sans SASS (ok j’arrête) !

 

Le SCSS est plus rigoureux au niveau de la syntaxe et, par conséquent, il est beaucoup plus lisible. Voilà à quoi ressemble du SASS pur (où l’indentation est fondamentale) :

 

 

Et en dessous, voici du SCSS (beaucoup mieux d’après moi, mais tout est une question d’habitude) :

 

Qu’est-ce qu’il nous faut pour l’utiliser ?

La solution la plus simple pour utiliser le SCSS, c’est d’utiliser Brackets (qui fait partie des meilleurs éditeurs front-end actuellement). Celui-ci permet l’installation de « Brackets SASS » qui compilera automatiquement vos SCSS en CSS.

Pour compiler, il vous faudra tout de même créer un fichier que vous nommerez : .brackets.json, et qui ressemblera à ça :

 

 

 

Si vous souhaitez affiner les réglages rendez-vous ici : https://github.com/jasonsanjose/brackets-sass

Lorsque vous sauvegarderez vos fichiers SCSS, un CSS sera généré ou mis à jour vers le chemin indiqué via « outputDir ». Voilà vous êtes prêt !

 

Variables et « mixins »

 

Avec SCSS, nous pouvons stocker une ou des valeurs récurrentes dans les variables :

 

Il y a certes un intérêt, mais celui-ci reste limité pour le moment. Nous allons donc expérimenter les possibilités du SCSS en nous intéressant aux « fonts » de notre projet (généralement l’une des choses qu’on fait en premier).

 

 

Voici notre mixin  de base qui va prendre plusieurs arguments : la famille, le style, l’épaisseur, la taille et la « transformation ». Ceux-ci sont stockés par le biais de variables (qu’on déclarera avant ou dans la mixin). Ils sont suivis des valeurs que nous souhaitons mettre par défaut et que l’on changera selon l’élément ciblé. On fera appel à cette mixin comme ceci :

 

Voilà pour le concept de base d’une « mixin ». Celles-ci sont très utiles et sont notamment utilisées pour ajouter les préfixes de compatibilité pour les navigateurs :

 

 

On écrit 1 fois tous nos préfixes et après, 1 seule ligne suffit pour faire notre « display : flex ». Et comme ça, on a moins mal aux doigts et on n’abime pas son clavier !

Bon, c’est pas mal tout ça, mais on en veut plus … Et ça tombe bien, on en a avec les fonctions !

Les fonctions

 

La principale différence entre mixin et function, est que la mixin nous permet d’appeler plusieurs attributs avec des valeurs variables. Alors que la function nous permet de retourner une valeur applicable à n’importe quel attribut (pour peu que cet attribut attende ce type de valeur).

 

La function suivante permet de passer des valeurs en pixel vers des valeurs en rem. On établit une taille de base de 16 px et on dit de faire le calcul suivant : « notre taille de font en px divisé par le $context soit 16 multiplié par 1rem (pour afficher l’unité de valeur) ».

Ca peut paraître un peu complexe pour commencer mais c’est plutôt utile puisqu’il vous suffira ensuite de noter :

Ca vous évitera les migraines dues aux calculs …

 

Les boucles

A la manière de ce qui se fait en JS, nous pourrons avoir recours à des conditions ou à des boucles qui nous seront très utiles.

 

if … else

Voici, une mixin que j’utilise pour des développements « mobile-first ».

 

Nous sommes sur mobile par défaut et ensuite si on passe au-dessus de 480px on rentre en version « phablet » … et on appelle cette mixin le plus simplement du monde.

 

Le @content dit juste que le contenu que l’on mettra à l’intérieur des accolades sera placé à cet endroit pour donner :

 

 

each

L’une des boucles les plus utiles en SCSS, c’est elle qui va nous permettre de parcourir des variables multiples … n’ayez pas peur c’est simple. Pour cette boucle, je me suis amusé à faire un import de font « automatique ».

Le prérequis sera d’organiser ses dossiers de font toujours de la même manière. Dans mon cas, j’ai fait ceci :

 

Et, on fait de même pour les autres fonts si il y en a. Puis dans notre SCSS, on va appeler une variable multiple :

que l’on va parcourir grâce au each :

 

Ah ! c’est un peu plus massif mais voici la « traduction » : dans la mixin « font », nous allons générer 1 $font-path pour chaque $type et $family présent dans $font et on fait correspondre le $type à une $weight. Enfin, si le $style est égal à italic on ajoute « -italic » au chemin.

 

Nous n’aurons plus qu’à importer nos fonts grâce à un :

 

Et ce, quel que soit le nombre de « fonts » présentes dans notre variable $font.

 

For

Deuxième boucle, bien utile dans certains cas.

 

Ci-dessus, nous assignons des styles <span> enfants de 1 à 10 (autrement dit aux 10 premiers <span> enfants d’un élément).

 

Il reste la boucle While, mais elle est assez peu intéressante, préférez-lui la boucle for qui aura le même usage avec un risque d’erreur moins important (car on définit tout de suite le début et la fin de la boucle contrairement à While).

 

Un « SASSeur » sachant « SASSer » !

À le SCSS est un « sous langage » dérivé du CSS qui est vraiment plaisant car il permet d’optimiser votre code et d’assurer une pérennité à vos intégrations. Cet article ne fait qu’exposer les bases de ce qui peut être fait.

 

Soyez curieux, persévérants et amusez-vous à explorer les méandres de SASS !

 

 

 

 

 

 

 

16 juin 2017