Avant d’aborder le Sass, parlons du CSS (Cascading Style Sheets) qui permet de styliser les pages web, de leur donner de la couleur et d’en agencer le contenu afin de restituer un visuel attractif. Sans cesse en évolution, le langage en est aujourd’hui à sa 3ème version : le CSS3. Celle-ci a apporté son lot de nouveautés : animations, media queries ou possibilité d’utiliser des polices non-standard. Toute personne amenée à développer des sites web est obligée de connaître ce langage. Cependant, pour moi (comme pour beaucoup d’autres), le principal soucis du CSS, c’est sa syntaxe, la même depuis sa première version.

Le CSS, un langage brouillon

Le CSS est en effet lourd à écrire, à modifier et à maintenir efficacement dans le temps.

Afin de styliser une page HTML, le langage CSS utilise des sélecteurs, qui désignent quels éléments sont impactés. Ces éléments sont désignés par des ID, des Classes et leur hiérarchie au sein du DOM HTML. Leur ciblage nécessite bien souvent l’écriture de règles qui peuvent s’avérer assez longue.

Exemple d’un sélecteur qui permet d’afficher une bordure sur des éléments d’une liste  :

Sélecteur CSS3 - Sass

Comme vous pouvez le voir c’est assez indigeste. C’est un sélecteur long à écrire, il est fort possible de faire une faute de frappe sans s’en rendre compte. Bref, ce n’est pas très clair, consommateur de temps et de précieux octets.

Autre exemple  : lorsque vous reprenez le projet développé par une tierce personne (voir l’un de vos anciens projets) et que vous ouvrez un fichier de 1864 lignes mal organisé, brouillon : bonjour l’angoisse !

Pour ajouter de nouveaux styles, la solution est souvent de créer un nouveau fichier CSS, de refaire des sélecteur en copier-coller, et de rajouter des !important là ou ça ne marchait pas du premier coup.

Avouez-le, vous aussi : vous l’avez fait.

Un des autres inconvénients, le plus gros pour moi, c’est le manque de variables. Imaginez-vous dans un fichier CSS  de quelques centaines de lignes. Et là, votre client vous demande de changer au dernier moment le bleu clair que vous utilisez partout en bleu foncé. Si vous utilisez un éditeur de code correct vous pouvez toujours remplacer les valeurs, et vous n’êtes pas à l’abri d’un oubli.

Mais ça ne serait pas beaucoup plus simple d’avoir une variable couleur que vous utiliserez partout et qu’il suffira de changer, 1 seule variable pour tout votre CSS ?

Vous en réviez ? SAAS l’a fait !

Les préprocesseur CSS

Pour palier aux défauts du CSS de nombreux langages/programmes sont apparus : les préprocesseurs CSS. Ils permettent de transformer un code (souvent dans un langage proche du CSS), en CSS. Les plus connus sont le LESS et le SASS. Ces langages permettent, tout en gardant un langage proche du CSS, d’ajouter des améliorations comme l’utilisation de variables, de fonctions etc…

Ils sont dépendant d’un préprocesseur, qui se chargera de les convertir en CSS et d’être lu par le navigateur. Ces préprocesseurs peuvent fonctionner de différentes façons, mais la plupart comme le Sass fonctionne sur un principe de compilation (idem pour le LESS). Au moment du développement, on va écrire en Sass, et le préprocesseur transformera le code en CSS, dans un fichier souvent minifié (c’est a dire que les commentaires, les sauts de lignes, les espaces inutiles seront supprimés).

Fichier Sass minifié

différence entre CSS non minifié et minifié

Il ne nous reste plus qu’à mettre le fichier CSS sur le serveur et il sera lu normalement par le navigateur !

Je vais à présent vous parler de mon préféré, le Sass.

Sass

Sass (Syntactically Awesome Stylesheets) est un langage qui une fois “compilé” permet la génération de CSS.  Vous écrivez en Sass et, via un compilateur Ruby, votre code est converti en CSS.

Avant de pouvoir l’utiliser il faut l’installer, avec la commande sudo gem install sass. Pour cela il faut avoir Ruby d’installé sur son ordinateur. Une fois installé, il suffit d’un peu de configuration et d’exécuter une commande pour compiler le code Sass en CSS.

Le premier et surement plus gros avantage de Sass, c’est la création de variables, qui pourront être utilisé dans tout votre style. Voici un exemple de variables :

Sass, exemple de variables

Ces variables peuvent servir à définir une font principale, des breakpoint pour du responsive, etc. Il suffit de changer la variable pour que tout dans le code soit changé. Si vous voulez changer la couleur principale du site, pas de soucis, une ligne à changer et c’est tout !

Maintenant parlons de l’imbrication. Vous vous souvenez de ce sélecteur pas très clair écrit un peu plus tôt, avec l’imbrication c’est de l’histoire ancienne. Vous pouvez imbriquer les sélecteurs afin de garder un code clair et compréhensible !

Sass, sélecteurs imbriqués

Ça peut paraître anodin comme ça, mais quand vous devez repasser sur un code avec des sélecteurs imbriqués, ou même pour l’écrire :

  • ça permet d’économiser un temps fou pour l’écrire,
  • ça permet aussi de mieux agencer son code, parce qu’on a moins de risque d’avoir du style appartenant au même élément à l’autre bout du fichier,
  • vous produisez du code clair pour vous mais aussi pour ceux qui peuvent passer derrière vous !

Un autre point positif de Sass, c’est les mixins, qui sont des fonctions qui « exécutent » du code CSS. On peut créer une fonction qui permet de définir une font ainsi qu’une taille de police. Une fois appelée ces fonctions écriront le code CSS défini dans celle-ci. Et bien sur il est possible de passer des paramètres au fonction. On peut faire des fonction pour les fonts, des fonction pour des boutons, pour ne pas avoir a réécrire à chaque fois le même CSS, si il y a juste une valeur qui change il suffit de la mettre en paramètre du mixin et le tour est joué !

 

Vous avez pu le voir Sass est déjà très complet. Mais en plus de ça j’utilise aussi Compass, un Framework Sass.

Compass

Compass est un Framework Sass, qui rajoute beaucoup de fonctionnalités à ce dernier. Vous allez me dire « Encore quelque chose à installer ».

Oui ! Mais vous n’imaginez pas ce qu’il peut vous apporter !  

Il permet d’ajouter des mixins pour les CSS3, qui permettent d’éviter les préfixes navigateur. Vous savez par exemple quand vous deviez faire un opacity, avant il vous fallait préfixer pour être compatible dans tous les navigateurs. Avec compass ce n’est plus la peine, c’est un vrai gain de temps.

Il y a plein de mixins disponible, pour les box-shadow, des transform, etc. Ils sont disponibles sur la documentation Compass CSS3

Les Sprites

Lorsque l’on souhaite optimiser le temps de chargement d’un site internet, chaque image affichée est appelée via une requête HTTP. Chacune des requêtes est potentiellement une perte de temps. Lorsqu’un site utilise beaucoup d’icônes et d’images, utiliser les sprites permet de les rassembler en une seule et ainsi, n’en avoir qu’une à charger. Les sprites peuvent aussi être utiles quand on optimise son site pour les mobiles. Et on sais l’importance d’avoir un site mobile optimisé.

Réunir toutes ces images en un sprite puis écrire les règles CSS permettant de les afficher à coup de background-position est long et fastidieux. A tel point que beaucoup de développeurs s’en affranchissent.

Pour palier à cela – et ravir la bande de fainéants que nous sommes – Compass s’occupe de tout, il récupère les images de votre dossiers de sprites, les assemble de manière optimisée en une seule et s’occupe d’écrire le code CSS approprié pour les background-position, les width et height, etc. Il n’y a plus rien à s’occuper.

Le petit plus ? Si vous changer une image du dossier sprites, il régénère automatiquement l’image.

Pour en savoir plus sur cette fonctionnalité :  rendez-vous sur la documentation des sprites.  

Compass est très simple d’utilisation. Il suffit de l’installer, de le configurer à l’aide de son fichier config, de le lancer, et il se chargera de créer les fichiers CSS automatiquement a chacun de vos changements dans le code Sass. C’est magique !

Inconvénients de Sass

Bien sur une technologie aussi performante pour écrire du CSS efficacement ne pouvait pas venir sans quelques inconvénients.

Le principal et le plus rebutant est le fait qu’il a besoin de Ruby pour fonctionner. Si vous êtes sur Linux ça devrait aller, sur MacOS il est déjà installé, mais sur Windows vous risquez d’avoir quelques soucis a l’installer, ça marchera mais non sans mal ! [ Comme a peu près tout sur Windows ]

NDLR : le plus simple pour les utilisateurs de Windows est d’opter pour un vrai système d’exploitation.

Il n’est également pas conseillé de modifier le CSS généré, car à la prochaine génération du Sass en CSS tout sera perdu. Un webmaster qui a juste accès au FTP ne pourra par exemple pas modifier un CSS si besoin. Il faudra qu’il passe par le développeur pour qu’il puisse faire des modifications.

À part ces 2 défauts, Sass est vraiment parfait ! Avec Compass en complément vous pourrez tout faire efficacement. Et faites-moi confiance ! Une fois adopté vous ne pourrez plus vous en passer !

Liens Utiles

Site de Sass : lien  

Site de Compass : lien

 

Un article rédigé pour vous par Antoine

Développeur web. "Pur produit made in Bretagne, il aime autant les crêpes que le code. Dernier arrivant de l'équipe de développement il intervient sur vos projets et propose des solutions idéalement adaptées à leur complexité." Spécialités :développement web | les pâtes carbo. Il aime : les burgers | le cinéma | les GIFS | la bière | Netflix. Il aime pas :les légumes | la bière brune | les doublages en français.