Le CSS seul est certes magnifique, mais les stylesheets deviennent de plus en plus large et complex a maintenir. C'est là qu'un préprocesseur peut être utile. Sass permet l'utilisations de fonctionalités qui n'existe pas encore en CSS, comme les variables, le nesting, mixins, la notion d'héritage et plein d'autre chose qui rendent l'écriture du CSS plus simple.

Dès que vous utiliserez Sass, vos travaux seront sauvegardé automatiquement dans un fichier .CSS normal, utilisable sur vos sites web.

Avec Sass on peut utiliser des variables, qui sont réutilisable tout au long de votre stylesheet. Vous pouvez enregistrer des couleurs, des groupes de fonts (font-stacks), ou n'importe quel valeur que vous souhaitez réutiliser.

Sass utilise le symbole '$' pour déclarer une variable (comme en PHP)

Lorsque Sass est procédé, il prend les différente variable et les remplaces ensuite par leurs valeurs. Chose assez pratique pour travailler avec des chartes graphiques par exemple, et cela permet de rester consistant partout dans le site.

Lorsque l'on écrit de l'HTML on peut se rendre compte que tout est claire et rangé de manière ordonné, mais aussi que les éléméments s'imbrique les uns dans les autres, c'est ca le "Nesting". On peut aussi remarquer que ce n'est pas le cas du CSS, qui est en général une longue succession d'éléments que l'on traite les uns apres les autres sans trop d'organisation distincte.

C'est la que rentre en jeu Sass. Sass permet de nester les selecteurs CSS de façon a ressembler à la hiérarchie visuelle de l'HTML.

On peut remarquer que les selecteurs "ul", "li" et "a" sont imbriqué (nester) dans le selecteur "nav". Cela permet d'organiser et de simplifier la lecture du code CSS.

Sass permet également de créer des fichiers partielles contenant un morceaux de code css. Ce qui permet de créer facilement un aspect de modularité dans son organisation du code.

Pour creer un fichier partiel il suffit de le nommer "_nom.scss". On peut ensuite les importer via la commande "@import".

CSS a une option d'import qui permet de séparer le CSS en plusieurs petites portions qui sont plus simple a gérer. Le seul problème est que chaque portions créer une nouvelle requête HTTP.

Sass reconstruit le fichier CSS a partir des "_partials" et du fichier principale .scss pour ensuite le transmettre au navigateur web.

Ci-dessus : le fichier partiel _reset.scss.
Et ci-dessous : son intégration via @import dans le fichier base.scss

Parfois en CSS il y a des propriétés qui sont assez longue a écrire, par exemple "border-radius" qui doit être implémenté pour chaque browser. Les "Mixin"s permettent de regrouper des déclarations ensemble pour les réutiliser plus tard.

Les mixins marchent un peu comme des fonctions que l'on déclare avec "@mixin nom(arg){}" et que l'on utilise avec "@include nom(arg);" dans un selecteur css.

Une des fonctionnalités les plus utiles de Sass. Utiliser @extend permet de partager des morceaux de propriétés CSS d'un selecteur à l'autre. Cela permet, entre autre, de réduire le nombre de répétition dans le code CSS.

Ce morceaux de code SCSS permet de répéter les propriétés de .message et de les appliquer à .success, .error et .warning grace a @extend .message;

Les opérateurs +, -, *, /, % sont utilisable avec SASS. Ci-dessous vous trouverez un exemple qui utilise ces opérateurs.