Access Code School (ACS), École du numérique pour tous en Bourgogne Franche-Comté, Auvergne Rhône-Alpes, Centre Val de Loire et Nouvelle-Aquitaine

Blog

Les préprocesseurs CSS – SASS et LESS

Le CSS est très utile mais il peut rapidement devenir pénible à écrire, plus particulièrement lorsque l’on doit utiliser plusieurs fois des règles similaires ou appliquer une même règle à plusieurs endroits.

C’est là que les préprocesseurs CSS comme SASS et LESS rentrent en jeu. Ils permettent d’optimiser l’écriture de fichiers CSS grâce à des fonctionnalités qui facilitent l’organisation du code.

Afin d’être utilisés les fichiers .less (pour Less) et .sass ou .scss (pour SASS) doivent être compilés en CSS. Il est également possible de les utiliser tels quels mais cela nécessite l’utilisation de Javascript pour Less et de Ruby pour SASS.

Les exemples ci-dessous sont réalisés avec Less mais il existe un équivalent avec SASS pour chacun d’entre eux.

Les fonctionnalités

Variables

Elles permettent de stocker des constantes afin d’être réutilisées à plusieurs endroits par la suite (@variable sur Less et $variable sur SASS). Il suffit alors de remplacer la valeur contenue dans la variable pour que cela s’applique partout où elle a été utilisée.

Imbrication/hiérarchisation

Il est possible d’imbriquer les sélecteur CSS :

Ce qui se compile en :

Mixins

Les mixins sont des fonctions qui peuvent être utilisées pour apporter une ou plusieurs propriétés à un élément. IL est possible d’y ajouter des paramètres afin d’apporter des changements à certaines propriétés. Très utile pour éviter d’avoir à répéter du code plusieurs fois tout en conservant une certaine flexibilité.

Ce qui se compile en :

Opérations mathématiques

Il est possible d’utiliser des opérations mathématiques pour différentes propriétés.

Conclusion

Les différences entre les deux sont minimes et le choix entre les deux relève plus de la préférence personnelle que de critères objectifs. SASS et Less offrent des fonctionnalités similaires qui permettent d’accélérer l’écriture de fichers CSS et les rendent bien plus faciles à maintenir. Je ne peux donc que conseiller leur utilisation.

About the Author

Ajouter un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *