SASS : CSS augmenté ?

Avec CSS, vous pouvez concevoir des sites Web selon vos idées. Mais le langage de feuille de style a ses limites. Beaucoup de con­cep­teurs de sites Web ai­me­raient voir une façon plus con­for­table de concevoir des sites Web. C’est là qu’in­ter­vien­nent les pré­pro­ces­seurs CSS. À l’aide d’un langage de feuille de style, qui est une sorte d’extension du CSS sous-jacent, vous pouvez gran­de­ment sim­pli­fier le travail de con­cep­tion. Le plus connu de ces langages étendus est SASS. Qu’est-ce qui se cache derrière le Syn­tac­ti­cally Awesome Style Sheet ?

Afin de com­prendre ce qu’est SASS et pourquoi vous avez besoin de ce langage, vous devez com­prendre la sig­ni­fi­ca­tion de CSS. Les sites Web sont tout d’abord basés sur le langage de balisage HTML. Si vous voulez concevoir en HTML, vous devez lier le contenu di­rec­te­ment au design, sur chaque page HTML. Le HTML n’est, pour faire simple, pas destiné à la con­cep­tion ; il est donc très limité dans ce domaine. Le Cascading Style Sheet (CSS) définit la re­pré­sen­ta­tion des pages HTML. Comme un modèle, le CSS repose sur le code HTML et définit le design de chaque élément de la page : police, couleur du texte, fond : les con­cep­teurs Web utilisent le CSS pour définir tous les éléments du design.

Par exemple, pour définir toutes les rubriques dans 22 px Calibri, dé­fi­nis­sez-les dans la feuille de style qui donne des di­rec­tives pour l’apparence de votre site Web. Ces règles sont gé­né­ra­le­ment stockées dans un fichier séparé qui est référencé par les pages HTML. Cela réduit con­si­dé­ra­ble­ment la quantité d’in­for­ma­tions par page.

Mais le CSS connaît des limites, qui de­vien­nent évidentes surtout lorsque l’on travaille avec le langage depuis de nom­breuses années. L’avantage du CSS est en même temps l’un de ses in­con­vé­nients : c’est un langage très simple. SASS rend l’ensemble un peu plus so­phis­ti­qué et simplifie énor­mé­ment le travail de création du design.

Tous les na­vi­ga­teurs modernes peuvent afficher les CSS sans problème, mais cela ne s’applique pas à SASS (qui est utilisé depuis plus de 10 ans) ou à d’autres langages de feuilles de style avancés. SASS se considère donc comme un pré­pro­ces­seur. Le code du document SASS est d’abord converti en CSS avant que le système ne livre le code source et donc le site Web.

Tout d’abord, il semble qu’il n’y ait pas besoin de SASS. Avec CSS on a pu enfin dé­ve­lop­per durant les dernières décennies des pages très tech­niques. Même si vous souhaitez tra­vail­ler avec SASS, il n’est pas possible de surpasser CSS. Le langage de feuille de style bien connu restera la base de pré­sen­ta­tion à l’avenir. SASS et d’autres langages ne sont dis­po­nibles que dans le cadre du CSS.

SASS offre cependant des options que le CSS seul ne propose pas :

• Variables : avec SASS, les in­for­ma­tions peuvent être stockées dans des variables pour être réu­ti­li­sées ul­té­rieu­re­ment. Par exemple, il est possible de stocker cen­tra­le­ment une valeur de couleur sous une variable plus pratique.
• Fonctions ma­thé­ma­tiques : avec SASS, vous pouvez également utiliser des opé­ra­teurs ma­thé­ma­tiques tels que +, -, *, / ou %. Ceci vous permet d’in­fluen­cer les spé­ci­fi­ca­tions de taille, par exemple.
• Fonctions : d’autres fonctions fa­ci­li­tent également le travail de con­cep­tion. Elles peuvent être utilisées, par exemple, pour corriger les valeurs de couleur ou analyser des listes.
• Boucles : un autre avantage de SASS est que vous pouvez utiliser des boucles. Ces boucles sont répétées jusqu’à ce qu’un statut que vous avez défini soit atteint.
• Dis­tinc­tions de cas : les énoncés con­di­tion­nels, si et dans le cas contraire, fonc­tion­nent de la même façon. Ce n’est que lorsque certains états se pro­dui­sent que les commandes spé­ci­fiées sont exécutées.
• Mixins : les mixins sont des modèles. Vous pouvez soit les créer vous-même, soit sim­ple­ment les intégrer dans votre code lorsque vous utilisez un framework.
• Em­preintes : le SASS original (con­trai­re­ment au SCSS) fonc­tionne avec des in­den­ta­tions et des sauts de ligne pour struc­tu­rer le code. Il n’y a pas de marqueurs sous forme de pa­ren­thèses né­ces­saires pour afficher l’im­bri­ca­tion, ni de points-virgules pour marquer les fins de ligne.
• Ni­di­fi­ca­tion : CSS ne permet pas de tra­vail­ler avec l’im­bri­ca­tion dans le code. SASS, d’autre part, donne à l’uti­li­sa­teur la pos­si­bi­lité de vi­sua­li­ser les dé­pen­dances, réduisant la re­don­dance et l’effort d’écriture.
• Héritage : il est possible d’hériter des pro­prié­tés d’un sélecteur à l’autre. Cela permet également d’éco­no­mi­ser de la paperasse et d’amincir le code.
• Fichiers partiels : pour intégrer des codets dans un fichier SASS, vous pouvez également utiliser des fichiers partiels. Ce sont des fichiers dans lesquels seules quelques lignes CSS doivent être contenues et qui sont importés dans un fichier SASS par commande.

Certains fra­me­works ou bi­blio­thèques utiles existent déjà pour SASS. Compass ou Bourbon font beaucoup de travail pour vous lors de la con­cep­tion d’un site Web.

Pour que le code SASS ait l’effet désiré, vous devez d’abord le convertir en CSS ordinaire. La com­pi­la­tion fonc­tionne très sim­ple­ment via une commande en ligne de commande :

Cette commande compile le code source du fichier exemple.sass que vous avez créé dans un nouveau fichier CSS. La syntaxe de SASS est au­to­ma­ti­que­ment adaptée aux règles du CSS. Par exemple, les héritages sont résolus et la syntaxe est ajustée.

Le travail sur un site Web est rarement vraiment complet et vous pouvez faire des chan­ge­ments réguliers à la con­cep­tion. C’est pourquoi SASS vous donne la pos­si­bi­lité de sur­veil­ler les dossiers ou les fichiers avec le paramètre --watch. Si vous apportez des mo­di­fi­ca­tions à celles-ci, le système re­com­pi­lera au­to­ma­ti­que­ment.

Il n’y a pas qu’une seule syntaxe dans laquelle vous pouvez utiliser SASS, mais deux : pre­miè­re­ment, vous avez la forme originale, qui est souvent appelée indented syntax (« syntaxe en retrait ») ou sim­ple­ment SASS. En outre, il existe une variante plus récente, qui est plus orientée vers les spé­ci­fi­ca­tions du CSS et qui s’appelle donc Sassy CSS (SCSS), c’est-à-dire CSS dans le style de SASS. Avec la version 3 de SASS, SCSS a été défini comme la syntaxe of­fi­cielle. La plus grande dif­fé­rence réside dans l’uti­li­sa­tion des crochets et des points-virgules.

La syntaxe SASS originale fonc­tionne avec des in­den­ta­tions et des sauts de ligne, une procédure de type YAML. Pour compléter une ligne de code, il suffit de faire un saut de ligne, c’est-à-dire d’appuyer sur la touche Entrée. Les in­den­ta­tions fonc­tion­nent très sim­ple­ment via la ta­bu­la­tion. En changeant la position dans le caractère, des re­grou­pe­ments sont formés, ce qu’on appelle des blocs de dé­cla­ra­tion. Cela n’est pas possible avec CSS lui-même. Des crochets bouclés doivent être utilisés pour les re­grou­pe­ments. Et c’est exac­te­ment ce que SCSS exige.

Il y a aussi une guerre d’opinion : certains uti­li­sa­teurs ne jurent que par la facilité d’uti­li­sa­tion du SASS d’origine, car vous n’avez pas à faire attention au placement correct des pa­ren­thèses lorsque vous déplacez des extraits de code source et vous pouvez gé­né­ra­le­ment créer un code plus mince et plus clair. Dans l’ensemble, indented syntax signifie moins de ca­rac­tères et de lignes. Les partisans du SCSS, par contre, sont heureux d’accepter l’effort sup­plé­men­taire, parce qu’il est plus semblable à ce que vous savez déjà de la CSS.

SCSS est un sur-ensemble de CSS, ce qui garantit que le code CSS fonc­tionne aussi bien dans SCSS, mais pas l’inverse. Les fonctions du SASS sont toujours en­tiè­re­ment incluses. Il est ainsi plus facile de tra­vail­ler avec les deux langages en même temps. De plus, pour les personnes qui tra­vail­lent déjà avec CSS et se sont habituées à la syntaxe, la con­ver­sion est beaucoup plus facile. Bien que SASS supporte les deux syntaxes, vous devez décider pour chaque projet : afin de pouvoir faire la dis­tinc­tion entre les dif­fé­rents formats, les fichiers reçoivent soit l’extension de fichier.sass, soit .scss.

SASS a quelques avantages, mais le pré­pro­ces­seur ne convainc pas tout le monde. Les avantages sont évidents : le langage du pré­pro­ces­seur donne plus de pos­si­bi­li­tés à l’uti­li­sa­teur lors de la création du code. Par exemple, de nombreux con­cep­teurs Web ap­pré­cient la fonction de stockage des couleurs dans les variables au lieu d’avoir toujours à spécifier la valeur de couleur dans un nombre hexa­dé­ci­mal. Les mélanges, les variables, l’héritage et l’im­bri­ca­tion per­met­tent de suivre beaucoup plus fa­ci­le­ment le principe du Don’t repeat yourself que dans les CSS tra­di­tion­nels. Cette théorie re­com­mande d’éviter les ré­pé­ti­tions dans le code et donc de garder le code source plus mince. De plus, cela réduit con­si­dé­ra­ble­ment l’effort requis pour les chan­ge­ments. Au lieu d’avoir à apporter des mo­di­fi­ca­tions à de nombreux endroits, il suffit d’effectuer une mo­di­fi­ca­tion de façon cen­tra­li­sée dans un seul poste.

Les in­con­vé­nients de SASS s’ap­pli­quent fon­da­men­ta­le­ment à chaque pré­pro­ces­seur et font référence au fait que le code généré doit d’abord être compilé. Ceci ajoute une étape sup­plé­men­taire au processus de dé­ve­lop­pe­ment. Cela rend le processus un peu plus fas­ti­dieux. Au lieu de pouvoir faire des ajus­te­ments di­rec­te­ment dans le fichier CSS et de voir les effets im­mé­dia­te­ment sur le site Web, les mo­di­fi­ca­tions apportées au design doivent d’abord être traduites en CSS. Des erreurs peuvent se glisser et le débogage devient plus difficile.

De plus, avant d’utiliser SASS, comme avec toute tech­no­lo­gie que vous ne con­nais­sez pas, vous devez investir du temps et des efforts dans l’ap­pren­tis­sage du nouveau langage. En plus du CSS, qui doit être maîtrisé dans tous les cas, il y a une autre langue à maîtriser.

Outre le SASS, LESS s’est également imposé dans les milieux du dé­ve­lop­pe­ment. Ce langage de feuille de style est plus orienté CSS et donc plus proche de la syntaxe du SCSS. Les deux pré­pro­ces­seurs partagent certaines ca­rac­té­ris­tiques : SASS et LESS con­tien­nent l’uti­li­sa­tion de mixins et de variables. Une dif­fé­rence, cependant, est que SASS est basé sur Ruby et utilise LESS Ja­vaS­cript. Mais même cela ne donne à aucun des deux pré­pro­ces­seurs un avantage sur l’autre.

Mais les vraies dif­fé­rences résident dans les fonctions logiques : LESS permet aux uti­li­sa­teurs d’activer les mixins uni­que­ment lorsque des si­tua­tions spé­ci­fiques se pro­dui­sent. C’est une fonction utile, mais l’uti­li­sa­tion des liens logiques dans LESS est déjà épuisée. SASS, d’autre part, offre des boucles et des dis­tinc­tions de cas qui sont familiers avec les langages de pro­gram­ma­tion.

Avec SASS, les uti­li­sa­teurs sont libres de choisir s’ils préfèrent utiliser indented syntax ou SCSS. Ainsi, chaque dé­ve­lop­peur peut décider par lui-même s’il veut s’éloigner des règles CSS ou s’il préfère rester plus près de l’original. Avec LESS, il n’y a pas de choix possible. Dans ce cas, les uti­li­sa­teurs doivent respecter les règles bien connues. Le code dans LESS est au­to­ma­ti­que­ment un sur-ensemble de CSS : tout code source formulé en CSS fonc­tionne aussi en LESS, à l’instar de SCSS.

SASS est beaucoup plus populaire parmi les con­cep­teurs Web. Ceci peut aussi être dû au fait que le SASS est un peu plus ancien. LESS a d’abord été supporté par le framework populaire de frontend Bootstrap, qui s’appuyait sur le pré­pro­ces­seur le plus jeune. Mais avec la version 4, le projet est of­fi­ciel­le­ment passé à SASS, ce qui devrait augmenter la po­pu­la­rité des Syn­tac­ti­cally Awesome Style Sheets.