SASS: Le préprocesseur productif

Blog

Séduisant pour les programmeurs, attrayant pour les Webdesigners/intégrateurs

Une nouvelle révolution dans le monde du CSS est en cours. Les feuilles CSS, pourtant basées sur la simplicité, n’ont pas cessé de s’alourdir avec l’ajout régulier de constantes venant densifier les listes de règles déjà existantes.

Les sites de plus en plus riches et complexes, la multitude de formats d’écran impactent de manière significative le respect des délais de livraisons établis. Une augmentation du risque dont les agences de communication se passeraient bien volontiers.

Dans un univers où tous les chemins mènent à l’innovation, la solution : Le SASS (Syntactically Awesome Style Sheets).

Un moyen de pointe en fracture avec l’obsolétisme¹ trop fréquent de nos navigateurs internet. Il suffira alors de suivre le guide d’installation sur le site officiel.

SASS se transpose en Quatre points fondamentaux :

- Les mixins consistent, d’avis d’experts, la plus grande avancée en terme d’innovation. Le terme « DRY » (Don’t Repeat You) constitue l’essence même de cette caractéristique. Propulsés avec des projets comme Bourbon, Pondasee et Compass, les mixins sonnent la fin de la duplication interminable de pan entier de CSS, propriétés ou sélecteurs. Au final, les mixins c’est [presque] donner des mises en formes complexes en utilisant une seule ligne de code.

- Les variables ou comment stocker des valeurs globales telles que les couleurs et les polices de caractères avec un $. Un moyen facile pour changer la couleur d’un site, sans passer par tous les éléments du CSS mais seulement avec la variable $. On vous laisse deviner le gain de temps.

- Le SASS simplifie les opérations mathématiques complexes en réutilisant une variable de base, une nouvelle fois représentée par le caractère $. En fait, toutes les règles afférentes aux mesures et dimensions (marges, padding, line-height,) peuvent-être redéfinies intuitivement.

- Les Placeholders. Plus de variables, retour à la règle unique ! Très similaires aux mixins, les placeholders utilisent les % pour créer des déclarations de style propres. SASS ira chercher tous les sélecteurs concernés en leur appliquant une règle unique.

En conclusion, le SAAS a révolutionné notre manière de structurer, modifier les feuilles de style. Une réelle efficience dans notre processus productif au niveau desktop et mobile. Au final, ces feuilles de style sont syntaxiquement impressionnantes.

¹Néologisme inventé par Serge Latouche dans « Bon pour la Casse », définissant l’obsolescence de nos produits. Et pour le coup, nos navigateurs de moins en moins au gout du jour.