SASS COMPASS – Le CSS revisité

I►SASS : Syntactically Awesome Stylesheets

Partie I : Installation

SASS est un pré-processeur ( un outil qui effectue des transformations sur le code source )

Il est avec LESS l’un des 2 pré-processeurs les plus utilisés (Bootstrap par exemple). Less a besoin de node.JS pour transpiler le code source et SASS a besoin de Ruby.
NB : il faudra ajouter au PATH de l’utilisateur le binaire C:\Ruby23-x64\bin

Après avoir installé Ruby, en ligne de commande (console) on peut installer SASS :

Pour vérifier si l’installation s’est bien effectuée :

SASS utilise 2 syntaxes pour écrire ses règles CSS :

• SASS : syntaxe ancienne sans accolades
• SCSS : syntaxe plus moderne avec accolades et qui se rapproche des standards CSS 🙂 , c’est celle que nous adopterons.

Premier exemple :

Et pour transpiler vers le fichier CSS :

Afin d’automatiser la conversion du code scss en css, on peut utiliser cette syntaxe :

ET l’on peut même optimiser le tout en travaillant au niveau du dossier :

Partie II : Le Langage

► Les variables se définissent avec un $ : $taille-titre-h1:1.5rem;

► L’opérateur & est l’équivalent de this, cad qui pointe l’objet lui même.

►Les Fonctions SASS acceptent des paramètres en entrée et renvoient (return) une seule valeur :

Une fonction SASS est utile pour faire des calculs mais ne renverra qu’une seule valeur et ne pourra modidier qu’un seule propriété CSS à la différence des mixins

► Les MIXINS

Le mixin est un ensemeble de propriétés CSS que l’on peut réexploiter facilement dans les documents en faisant un simple include (copier-coller)

Les mixins peuvent également interpréter des paramètres en entrées. S’il n’y a pas de paramètres on ne met pas de parenthèses !

PARTIE III : Compass

Compass est un framework CSS3 destiné à optimiser le travail avec SASS. Compass sournit une grande quantité de Mixins.

Comment installer compass :

 

Michel BOCCIOLESI