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 concepteurs de sites Web aimeraient voir une façon plus confortable de concevoir des sites Web. C’est là qu’interviennent les préprocesseurs CSS. À l’aide d’un langage de feuille de style, qui est une sorte d’extension du CSS sous-jacent, vous pouvez grandement simplifier le travail de conception. Le plus connu de ces langages étendus est SASS. Qu’est-ce qui se cache derrière le Syntactically Awesome Style Sheet ?

Afin de comprendre ce qu’est SASS et pourquoi vous avez besoin de ce langage, vous devez comprendre la signification 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 directement au design, sur chaque page HTML. Le HTML n’est, pour faire simple, pas destiné à la conception ; il est donc très limité dans ce domaine. Le Cascading Style Sheet (CSS) définit la représentation 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 concepteurs 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éfinissez-les dans la feuille de style qui donne des directives pour l’apparence de votre site Web. Ces règles sont généralement stockées dans un fichier séparé qui est référencé par les pages HTML. Cela réduit considérablement la quantité d’informations par page.

Mais le CSS connaît des limites, qui deviennent évidentes surtout lorsque l’on travaille avec le langage depuis de nombreuses années. L’avantage du CSS est en même temps l’un de ses inconvénients : c’est un langage très simple. SASS rend l’ensemble un peu plus sophistiqué et simplifie énormément le travail de création du design.

Tous les navigateurs 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éprocesseur. 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évelopper durant les dernières décennies des pages très techniques. Même si vous souhaitez travailler avec SASS, il n’est pas possible de surpasser CSS. Le langage de feuille de style bien connu restera la base de présentation à l’avenir. SASS et d’autres langages ne sont disponibles que dans le cadre du CSS.

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

• Variables : avec SASS, les informations peuvent être stockées dans des variables pour être réutilisées ultérieurement. Par exemple, il est possible de stocker centralement une valeur de couleur sous une variable plus pratique.
• Fonctions mathématiques : avec SASS, vous pouvez également utiliser des opérateurs mathématiques tels que +, -, *, / ou %. Ceci vous permet d’influencer les spécifications de taille, par exemple.
• Fonctions : d’autres fonctions facilitent également le travail de conception. 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.
• Distinctions de cas : les énoncés conditionnels, si et dans le cas contraire, fonctionnent de la même façon. Ce n’est que lorsque certains états se produisent que les commandes spécifiées sont exécutées.
• Mixins : les mixins sont des modèles. Vous pouvez soit les créer vous-même, soit simplement les intégrer dans votre code lorsque vous utilisez un framework.
• Empreintes : le SASS original (contrairement au SCSS) fonctionne avec des indentations et des sauts de ligne pour structurer le code. Il n’y a pas de marqueurs sous forme de parenthèses nécessaires pour afficher l’imbrication, ni de points-virgules pour marquer les fins de ligne.
• Nidification : CSS ne permet pas de travailler avec l’imbrication dans le code. SASS, d’autre part, donne à l’utilisateur la possibilité de visualiser les dépendances, réduisant la redondance et l’effort d’écriture.
• Héritage : il est possible d’hériter des propriétés d’un sélecteur à l’autre. Cela permet également d’économiser 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 frameworks ou bibliothèques utiles existent déjà pour SASS. Compass ou Bourbon font beaucoup de travail pour vous lors de la conception d’un site Web.

Pour que le code SASS ait l’effet désiré, vous devez d’abord le convertir en CSS ordinaire. La compilation fonctionne très simplement 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 automatiquement 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 changements réguliers à la conception. C’est pourquoi SASS vous donne la possibilité de surveiller les dossiers ou les fichiers avec le paramètre--watch. Si vous apportez des modifications à celles-ci, le système recompilera automatiquement.

Il n’y a pas qu’une seule syntaxe dans laquelle vous pouvez utiliser SASS, mais deux : premièrement, vous avez la forme originale, qui est souvent appelée indented syntax (« syntaxe en retrait ») ou simplement SASS. En outre, il existe une variante plus récente, qui est plus orientée vers les spécifications 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 officielle. La plus grande différence réside dans l’utilisation des crochets et des points-virgules.

La syntaxe SASS originale fonctionne avec des indentations 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 indentations fonctionnent très simplement via la tabulation. En changeant la position dans le caractère, des regroupements sont formés, ce qu’on appelle des blocs de déclaration. Cela n’est pas possible avec CSS lui-même. Des crochets bouclés doivent être utilisés pour les regroupements. Et c’est exactement ce que SCSS exige.

Il y a aussi une guerre d’opinion : certains utilisateurs ne jurent que par la facilité d’utilisation du SASS d’origine, car vous n’avez pas à faire attention au placement correct des parenthèses lorsque vous déplacez des extraits de code source et vous pouvez généralement créer un code plus mince et plus clair. Dans l’ensemble, indented syntax signifie moins de caractères et de lignes. Les partisans du SCSS, par contre, sont heureux d’accepter l’effort supplémentaire, 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 fonctionne aussi bien dans SCSS, mais pas l’inverse. Les fonctions du SASS sont toujours entièrement incluses. Il est ainsi plus facile de travailler avec les deux langages en même temps. De plus, pour les personnes qui travaillent déjà avec CSS et se sont habituées à la syntaxe, la conversion est beaucoup plus facile. Bien que SASS supporte les deux syntaxes, vous devez décider pour chaque projet : afin de pouvoir faire la distinction entre les différents formats, les fichiers reçoivent soit l’extension de fichier.sass, soit .scss.

SASS a quelques avantages, mais le préprocesseur ne convainc pas tout le monde. Les avantages sont évidents : le langage du préprocesseur donne plus de possibilités à l’utilisateur lors de la création du code. Par exemple, de nombreux concepteurs Web apprécient la fonction de stockage des couleurs dans les variables au lieu d’avoir toujours à spécifier la valeur de couleur dans un nombre hexadécimal. Les mélanges, les variables, l’héritage et l’imbrication permettent de suivre beaucoup plus facilement le principe du Don’t repeat yourself que dans les CSS traditionnels. Cette théorie recommande d’éviter les répétitions dans le code et donc de garder le code source plus mince. De plus, cela réduit considérablement l’effort requis pour les changements. Au lieu d’avoir à apporter des modifications à de nombreux endroits, il suffit d’effectuer une modification de façon centralisée dans un seul poste.

Les inconvénients de SASS s’appliquent fondamentalement à chaque préprocesseur et font référence au fait que le code généré doit d’abord être compilé. Ceci ajoute une étape supplémentaire au processus de développement. Cela rend le processus un peu plus fastidieux. Au lieu de pouvoir faire des ajustements directement dans le fichier CSS et de voir les effets immédiatement sur le site Web, les modifications 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 technologie que vous ne connaissez pas, vous devez investir du temps et des efforts dans l’apprentissage 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éveloppement. Ce langage de feuille de style est plus orienté CSS et donc plus proche de la syntaxe du SCSS. Les deux préprocesseurs partagent certaines caractéristiques : SASS et LESS contiennent l’utilisation de mixins et de variables. Une différence, cependant, est que SASS est basé sur Ruby et utilise LESS JavaScript. Mais même cela ne donne à aucun des deux préprocesseurs un avantage sur l’autre.

Mais les vraies différences résident dans les fonctions logiques : LESS permet aux utilisateurs d’activer les mixins uniquement lorsque des situations spécifiques se produisent. C’est une fonction utile, mais l’utilisation des liens logiques dans LESS est déjà épuisée. SASS, d’autre part, offre des boucles et des distinctions de cas qui sont familiers avec les langages de programmation.

Avec SASS, les utilisateurs sont libres de choisir s’ils préfèrent utiliser indented syntax ou SCSS. Ainsi, chaque développeur 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 utilisateurs doivent respecter les règles bien connues. Le code dans LESS est automatiquement un sur-ensemble de CSS : tout code source formulé en CSS fonctionne aussi en LESS, à l’instar de SCSS.

SASS est beaucoup plus populaire parmi les concepteurs 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éprocesseur le plus jeune. Mais avec la version 4, le projet est officiellement passé à SASS, ce qui devrait augmenter la popularité des Syntactically Awesome Style Sheets.