Le tutoriel SASS : ce que vous devez savoir !

Si vous avez déjà créé un site Web, vous connaissez probablement bien CSS. Cependant, vous avez peut-être également oublié certaines fonctionnalités cachées lorsque vous utilisez le langage de feuilles de style. Concevoir des sites Web avec CSS peut être très fastidieux, raison pour laquelle de nombreux développeurs font maintenant confiance à SASS. Derrière l’acronyme se cache une promesse : des feuilles de style syntaxiquement impressionnantes. SASS est à la fois un préprocesseur et un langage de feuille de style.

Le fait qu’il s’agisse d’un préprocesseur est dû au fait qu’il doit être converti. Avant que SASS puisse être lu, le code source doit être compilé en CSS ordinaire. Nous expliquons également comment cette étape fonctionne dans le tutoriel SASS détaillé. Pour simplifier l’apprentissage du SASS, nous allons vous guider étape par étape et tout expliquer avec des exemples.

SASS est, en principe, indépendant de la plateforme, ce qui signifie que vous pouvez l’utiliser avec un PC, un Mac ou Linux. SASS est basé sur Ruby, du moins dans la version originale. Par conséquent, le langage de programmation doit être intégré à votre système. Ruby doit être préinstallé dans macOS. Pour les PC Windows, vous pouvez utiliser le RubyInstaller. Le package d’installation contient la langue, un environnement de développement (dont vous n’avez pas besoin pour SASS) et de la documentation. L’installation est également facile pour les utilisateurs de Linux.

Le projet LibSASS intègre également SASS à d’autres langages de programmation : C/C++, Java, JavaScript, Node PHP, Python et quelques autres langages disponibles. En utilisant des wrappers appropriés (un outil de mise en œuvre), vous pouvez tirer parti d’autres langages de programmation. LibSASS, conçu pour les bibliothèques, ainsi que des informations sur les wrappers disponibles, à retrouver sur le site officiel du projet.

Il existe plusieurs façons d’installer SASS sur votre système. Entre-temps, plusieurs applications ont été créées pour vous faciliter la tâche avec le langage de feuille de style. Certaines (telles que Koala ou Scout App) sont disponibles gratuitement en tant que logiciels open source. En principe, toutefois, vous n’avez pas besoin de programmes supplémentaires pour utiliser SASS sur votre système. Ruby contient le gem du gestionnaire de packages, avec laquelle le langage de feuille de style peut être facilement implémenté à l’aide d’une ligne de commande. Pour ce faire, ouvrez le terminal ou l’invite de commande et entrez la commande suivante:

Cela devrait suffire. Si vous recevez un message d’erreur, il est toutefois possible que vous n’ayez pas les droits d’installation nécessaires. Vous pouvez résoudre ce problème en utilisant la commande sudo (macOS, Linux) ou en lançant l’invite de commande en tant qu’administrateur à l’aide du bouton droit de la souris (Windows). Pour vérifier si l’installation a réussi et est à jour, demandez à SASS quelle version est installée:

En plus de l’installation, vous devez également configurer la compilation. Pour que votre code SASS fonctionne sur un site Web, il doit d’abord être converti en CSS. Il existe plusieurs façons de procéder : si vous avez choisi l’un des programmes pour installer SASS, vous pouvez également l’utiliser pour la compilation. Si vous travaillez avec les task runners Grunt ou Gulp, ils feront le travail pour vous une fois que vous les mettrez en place. Pour certains éditeurs de texte, il existe même des plugins qui font la compilation pour vous. Cependant, vous pouvez également effectuer l’étape de conversion à partir de la ligne de commande.

SASS offre aux utilisateurs la possibilité de recompiler après chaque modification du code source ou d’activer un mode de surveillance. Dans ce dernier cas, le compilateur vérifie un fichier ou un dossier complet et effectue la conversion automatiquement. Pour surveiller, utilisez la ligne de commande pour accéder au dossier de votre site Web et lancer l’une des deux commandes suivantes :

Vous pouvez surveiller le fichier « exemple.sass » et compiler le code source dans le fichier « exemple.sass ». Si vous ajoutez deux autres sous-dossiers dans votre dossier de projet - un pour les fichiers SASS et un autre pour les fichiers CSS, nommez-les « sass » et « css » en conséquence, et vous pouvez surveiller tout le dossier :

Dès que vous modifiez et enregistrez les fichiers SASS, le compilateur écrase automatiquement les fichiers CSS existants avec les versions les plus récentes.

Vous souhaiterez peut-être déplacer votre site Web existant, déjà écrit en CSS traditionnel, vers SASS. Vous devrez également convertir votre ancien code CSS. Avant de faire cela, toutefois, vous devez déterminer si vous souhaitez utiliser la syntaxe SASS originale (en bref : SASS) ou choisir la variante SCSS la plus récente (pour en savoir plus à ce sujet, consultez notre article du Digital Guide IONOS). Il existe également des commandes pour les conversions :

Le convertisseur lit les formats correspondants à partir des extensions de fichier. Vous pouvez également utiliser un site Web simple et utile : pour CSS 2 SASS/SCSS, entrez votre code CSS sur le côté gauche de la fenêtre et affichez le code source converti à droite dans le format souhaité. Il ne vous reste plus qu’à copier le code dans un fichier. Si vous décidez d’utiliser SCSS, la conversion est optimale : renommez vos fichiers : au lieu de «.css », tapez simplement «.scss ». Tout code écrit avec des règles CSS fonctionne également sous SCSS.

Comme mentionné précédemment, il existe plus d’une syntaxe lorsqu’il s’agit de SASS. Deux formats concurrents se sont établis. À l’origine, SASS était basé sur la syntaxe maintenant connue comme l’indentation comme syntaxe, les indentations déclenchant l’imbrication et un saut de ligne mettant effectivement fin à une ligne de code. En revanche, SCSS est davantage orienté vers le format CSS et nécessite des accolades et des points-virgules. Pour que ce tutoriel fonctionne quelle que soit la syntaxe, nous allons présenter la procédure dans les deux formats. Voici un guide pas à pas des particularités du SASS.

La plupart des développeurs Web apprécient l’utilisation de variables dans SASS. Avec cette fonction utile, vous pouvez enregistrer des informations sous un alias et les réutiliser où vous le souhaitez. Les variables sont très populaires en termes de spécifications de couleur et de taille, par exemple. Une variable peut être utilisée pour stocker la valeur hexadécimale d’une couleur ou pour ajuster une taille fixe à l’aide de fonctions mathématiques. Les variables sont introduites dans SASS avec un signe dollar ($) :

SASS

SCSS

Ensuite, vous devez simplement insérer les variables aux endroits appropriés dans le code :

SASS

SCSS

Lors de la compilation, le compilateur adapte enfin la syntaxe à CSS et résout les variables :

CSS

Il peut être utile de spécifier une valeur par défaut pour certaines variables. Sauf indication contraire, SASS assume ces informations. Inversement, si vous définissez la variable différemment, les informations par défaut sont ignorées. Ceci peut être utile, par exemple, si un développeur transmet un produit incomplet à un client qui souhaite encore apporter des modifications, ou si un web designer utilise son propre modèle. Vous pouvez créer un préréglage comme celui-ci en définissant un indicateur « !default » flag. Vous pouvez entrer des valeurs normales et des variables déjà définies :

SASS

SCSS

SASS a une directive pratique qui vous permet d’inclure d’autres fichiers dans la feuille de style. Par exemple, vous créez un fichier dans lequel vous définissez toutes les variables (vous pouvez ici spécifier et nommer toutes les valeurs de couleur requises), puis importer le fichier. Utilisez maintenant les informations du fichier importé comme si elles se trouvaient dans le code source actuel. Ceci vous aide à garder vos feuilles de style claires. Vous pouvez importer autant de fichiers que vous le souhaitez à l’aide de «@import», même pour les sous-répertoires. La fonction gère même l’importation de plusieurs fichiers en une seule étape :

SASS

SCSS

Si vous voulez inclure .sass. ou des fichiers .scss, vous n’avez pas besoin de spécifier une extension de fichier, le système suppose automatiquement que vous entendez ces types de fichiers. Vous pouvez également inclure des fichiers CSS. Cependant, vous spécifiez également l’extension pour que l’ordinateur sache exactement ce que vous voulez dire. Compiler résout également cette simplification : le code CSS final ne contient plus la directive, mais uniquement les informations des fichiers correspondants.

Les partiels sont la chose la plus courante que vous importerez lorsque vous travaillerez avec SASS. Les partiels sont des fragments de code, et ils vous permettent de créer des modules que vous pouvez facilement installer encore et encore. Si vous nommez le fichier, il est important de placer un trait de soulignement avant le nom réel. Cela informe le compilateur que le fichier correspondant ne nécessite pas de contrepartie CSS. Sinon, le système convertirait tous les fichiers SASS en CSS s’il était correctement surveillé.

Si vous importez les partiels, omettez l’underscore. SASS sait également de quel fichier vous parlez. Par conséquent, il est nécessaire que vous ne créiez pas de fichiers portant le même nom. Si vous avez à la fois « exemple.sass » et « _example.sass », cela entraînera une erreur. Ceci s’applique également aux extensions de fichier : « exemple.sass » et « exemple.scss » ne doivent pas figurer dans le même répertoire.

Les mixins sont une autre directive importante. Ce sont des règles fixes que vous pouvez rappeler encore et encore dans la feuille de style sans avoir à réinsérer le code complet. Cela aide à travailler plus rapidement et à garder le code plus simple. Tout ce qui est permis dans SASS peut être inclus dans un mixin : règles, paramètres ou fonctions. Même si l’espace dans le mixin n’a pas de restrictions, il ne devrait pas contenir plus de vingt lignes. Le but ultime est d’accroître la simplicité au lieu de tout compliquer davantage.

Pour gérer efficacement les mixins, vous avez besoin de deux directives : « @mixin » et « @include ». Avec la première, vous créez le modèle, avec la seconde, vous incluez le bloc de code :

SASS

SCSS

Lors de la création du mixin, attribuez un nom au modèle (masqué, par exemple). En outre, vous pouvez également réintégrer le bloc de code aux positions choisies :

SASS

SCSS

Dans le code CSS final, le bloc de code source complet apparaît à la place du mixin. La définition du mixin lui-même (@mixin) n’y figure plus.

La règle d’extension vous épargne beaucoup de travail. Cette directive garantit que toutes les propriétés d’une classe sont transmises à une autre. Pour éviter de tout redéfinir, utilisez « @extend ». La directive fonctionne également comme une chaîne. Une classe définie par « @extend » peut faire partie d’une troisième classe :

SASS

SCSS

The compiler resolves the code as follows:

CSS

Dans certaines situations, vous définissez l’apparence d’une catégorie que vous ne souhaitez pas utiliser sur votre site Web réel, à l’aide du formulaire @extend. Cela se produit fréquemment lorsque vous construisez votre propre bibliothèque. SASS propose des sélecteurs de substitution pour ces situations. Vous utilisez un signe de pourcentage (%) pour identifier une classe que vous créez uniquement pour une utilisation dans d’autres classes. Si vous n’importez pas ce type de sélecteur lors de la conception de votre site Web, SASS ne le compilera pas dans CSS :

SASS

SCSS

Dans le code CSS final, la classe « module » n’apparaît plus. Leurs propriétés sont passées directement à la classe « post ».

CSS

L’indicateur « !optional » peut également s’avérer très utile. Si vous écrivez une extension pour une classe qui n’existe pas, SASS générera une erreur lors de la compilation. Avec !optional, vous pouvez éviter cela. SASS ignorera simplement la commande s’il ne trouve pas de classe appropriée.

En HTML, il va sans dire que le code est divisé en une arborescence hiérarchique. CSS ignore cette fonction et oblige l’utilisateur à déclarer des propriétés encore et encore. SASS apporte la possibilité de réintégrer les feuilles de style en permettant aux sous-catégories d’hériter des propriétés de la catégorie parente. Cela garantit également que le code reste globalement plus fin et que le travail nécessaire pour écrire et attendre est moins long. Par exemple, il est possible de définir l’apparence des liens et de déterminer dans l’imbrication l’aspect de ces liens lors du survol, ou encore de savoir s’ils ont déjà été visités. Si le nesting est utilisé dans le code, l’esperluette (&) est utilisée pour remplacer une partie du sélecteur par le parent.

SASS

SCSS

Lors de la compilation, le nesting doit être à nouveau résolu. En CSS, chaque état réapparaît défini séparément.

CSS

Outre la résolution du nesting, la compilation garantit également que les variables (dont nous avons omis la définition dans l’exemple) redeviennent des valeurs hexadécimales.

Avec le nesting, vous pouvez également transmettre des « propriétés ». CSS connaît certaines caractéristiques appartenant à la même famille. Par exemple, toutes les informations de formatage de police appartiennent à la même famille, mais doivent être définies en CSS en tant que points individuels, avec leurs noms de propriété complets. SASS vous donne la possibilité de regrouper les propriétés individuelles sous les noms de famille.

SASS

SCSS

SASS dispose de nombreuses fonctions pour faciliter l’utilisation de votre feuille de style. Il s’agit de workflows préfabriqués que vous auriez dû exécuter manuellement. Les fonctions peuvent être affectées à différentes catégories :

• Couleurs : ces fonctions permettent d’ajuster les valeurs de couleur, la saturation, la transparence et de nombreuses autres propriétés. Par exemple, vous pouvez mélanger une nouvelle couleur avec mix () à partir de deux couleurs.
• Listen : pour les listes (série de valeurs de propriétés CSS), vous pouvez utiliser des fonctions pour lire le nombre d’entrées, par exemple, ou fusionner plusieurs listes en une seule.
• Chaînes : les chaînes sont des chaînes fixes, comme celles utilisées dans les textes. Les fonctions de ce type mettent automatiquement une chaîne entre guillemets d’un texte complet en majuscules.
• Sélecteurs : avec cette catégorie de fonctions, vous pouvez manipuler des sélecteurs complets. Par exemple, « selector unif y ()» vous permet de créer un sélecteur sur deux. Cela peut vous faire économiser beaucoup de paperasse.
• Nombres : dans la zone des nombres, des valeurs ou des unités, vous trouverez des fonctions qui peuvent, par exemple, arrondir de haut en bas, trouver le plus grand nombre d’un ensemble ou afficher un nombre aléatoire.
• Cartes : dans SASS, les cartes sont des structures de données composées de clés et de propriétés. Les fonctions correspondantes manipulent les collections. Par exemple, vous pouvez fusionner deux cartes ou supprimer une clé spécifique d’une carte.
• Introspection : les fonctions de cette zone donnent un aperçu du contenu complet de la feuille de style. Par exemple, vérifiez si une fonctionnalité, un mixin ou une fonction spécifique existe dans votre code.
• Divers : divers SASS inclut la fonction utile « if() ». Ceci ne doit pas être confondu avec la directive du même nom. La différence est expliquée dans la section «branchement» ci-dessous.

Vous insérez toujours des fonctions dans votre code selon le même modèle : chaque fonction a un nom individuel et contient certains paramètres entre parenthèses, séparés par des virgules. À la fin, la fonction génère une seule valeur. En utilisant une fonction mix() simple mais très utile comme exemple, nous allons expliquer la syntaxe SASS :

SASS

SCSS

Avec cette fonction, mélangez les deux valeurs de couleur que vous avez déjà définies en tant que variables (les valeurs de couleur ne doivent pas être enregistrées en tant que variables, vous pouvez placer les valeurs hexadécimales directement dans la fonction). Le troisième paramètre est ce que devrait être le rapport de mélange : dans notre exemple, 30 % de « $ color-1 » sont inclus dans le résultat final. Si vous laissez le dernier paramètre vide, SASS suppose un mix 50/50. Une seule valeur apparaît dans le CSS même, la valeur hexadécimale de la couleur résultante :

CSS

Toutes les fonctions mentionnées jusqu’à présent sont déjà dans l’état de livraison de SASS. Le langage de feuille de style vous permet également de définir vos propres fonctions pour un projet. Cela facilite et accélère les étapes de travail fréquentes. Cela signifie que les fonctions sont similaires aux mixins. Alors que ces derniers ont des lignes de code en sortie, les fonctions ne renvoient qu’une valeur. Ils créent des fonctions avec la directive « @function » correspondante. En fait, vous créez toujours une fonction avec une paire de directives. En plus de la « fonction @ », un « @retour » intégré est requis pour définir la valeur de sortie :

SASS

SCSS

Vous pouvez utiliser la fonction exemple pour effectuer un calcul de largeur de colonne pour une grille de présentation. Dans cet exemple, il y a 12 colonnes. Dans l’étape suivante, nommez la fonction et définissez le nombre de paramètres qu’elle contient. Dans cet exemple, il s’agit d’un nombre. De plus, nous déterminons ce que la fonction doit faire et donc aussi la valeur qu’elle génère. Dans ce cas, « largeur de colonne » multiplie par 100 le nombre saisi en tant que paramètre et divise le résultat par le nombre de colonnes. Une fois que vous avez défini la fonction, vous pouvez l’utiliser encore et encore en modifiant les paramètres. Seule la valeur résultante est stockée dans le CSS final :

CSS

Les boucles donnent au langage feuille de style l’attrait d’un véritable langage de programmation. Utilisez des boucles pour créer des blocs d’instructions dans SASS qui se répètent jusqu’à ce qu’une condition que vous spécifiez se produise. Trois directives différentes sont disponibles pour créer des boucles :

• @for
• @while
• @each

La boucle « @for » est le cas standard d’une boucle dans le contexte de la programmation. Elle commence au début et répète le travail jusqu’à un état de sortie, et la fin est atteinte. Dans SASS, cette directive se présente sous deux variantes : soit le dernier cycle est exécuté à nouveau lorsque la cible est atteinte, soit la boucle est terminée au préalable.

SASS

SCSS

Après la directive, vous spécifiez d’abord une variable ($i), puis définissez le point de départ (1) et le point de destination (4). Avec « through », vous spécifiez que la quatrième répétition doit également être exécutée, tandis que la boucle s’arrête après la troisième passe. Si vous spécifiez une valeur supérieure à la valeur finale pour la valeur initiale, SASS compte en arrière. Vous avez deux éléments dans la boucle : le nom dans le CSS est choisi, ce qui donne un nombre plus élevé avec « #{$i} ». La variable, et donc aussi le nom, est augmentée de 1 pour chaque exécution.

Deuxièmement, écrivez entre accolades ou en retrait ce qui est censé se passer. Dans notre exemple, une spécification de taille est manipulée avec une valeur croissante pour chaque exécution. Une entrée distincte apparaît alors dans le CSS pour chaque exécution :

CSS

La directive « @while » fonctionne de manière très similaire à « @for ». Cependant, bien que ce dernier ait des points de départ et de destination fixes, une boucle « @while » contient une requête logique : tant qu’un état est vrai, les instructions sont répétées. Comme vous le verrez, nous pouvons obtenir exactement le même résultat avec la fonction « @while » :

SASS

SCSS

Dans ce type de boucle, vous devez d’abord attribuer une valeur à la variable, car la directive elle-même ne nécessite pas de valeur de départ. Dans la boucle, vous spécifiez le statut jusqu’à quelles répétitions sont effectuées. Dans notre exemple, la boucle s’exécute tant que la variable est inférieure à 5. L’instruction dans la boucle est initialement identique à celle de l’exemple «@for». De nouveau, ajustez le nom de l’élément variable et augmentez sa taille. De plus, vous devez inclure une commande dans la boucle qui augmente «$ i» à chaque passage, sinon la boucle sera exécutée jusqu’à ce que le compilateur SASS soit arrêté. Cependant, à la fin, vous obtenez le même code CSS que dans la boucle «@for».

La directive « @each », en revanche, fonctionne légèrement différemment. Cette boucle est basée sur une liste : la boucle parcourt une collection de données que vous avez définie. Pour chaque entrée, « @each » fait sa propre répétition. Par exemple, il serait possible de générer à nouveau le même résultat, comme pour les autres boucles, en spécifiant une liste avec les valeurs 1, 2, 3 et 4. Le véritable avantage de cette boucle, cependant, est que vous pouvez également entrer autres informations que les valeurs numériques dans la liste - par exemple utilisez « @each » pour insérer différentes images dans votre conception. Vous pouvez soit entrer les données directement dans la directive, soit entrer la liste dans une variable, puis l’appeler.

SASS

SCSS

Ici, vous aurez également besoin d’une variable. Cela prend le nom d’une des entrées de la liste à chaque exécution. Le nom est intégré à la fois dans le nom du bloc de code et dans le nom du fichier de l’image. Pour que la conception fonctionne plus tard, vous devez d’abord avoir stocké les images correspondantes dans le chemin spécifié. La boucle garantit automatiquement que la variable reprend l’entrée suivante.

CSS

En plus des boucles, SASS vous fournit un autre moyen issu du monde de la programmation : créer des branches selon le principe if-then-else. Avec la directive « @if », vous n’exécutez une instruction que si un certain état existe, sinon une autre commande prend effet. Outre la directive, il existe également une fonction if(). Les deux sont indépendants l’un de l’autre, mais peuvent également se produire ensemble. La fonction elle-même peut facilement être expliquée. Elle contient trois paramètres : les conditions et deux sorties différentes. La première sortie est une sortie si le premier paramètre est vrai, sinon la fonction lit le troisième paramètre.

SASS

SCSS

Dans notre exemple, la fonction vérifie si la variable « $text-color » est définie sur noir. Dans ce cas (comme dans l’exemple ci-dessus), l’arrière-plan est affiché en blanc. Dans les autres cas, le CSS définirait le fond en noir. Comme vous pouvez le constater à partir de cet exemple, les branches ne sont pas nécessairement adaptées à la conception d’un site Web complet. La directive et la fonction sont principalement utiles dans les mixins ou les partiels. Cela permet au modèle de mieux répondre à ce qui se passe dans la conception finale des valeurs. Inversement, si vous savez déjà que la couleur de votre texte est en noir, vous n’avez pas besoin d’écrire une branche complexe pour rendre l’arrière-plan blanc. Les fonctions ont la propriété de reproduire une valeur unique. Pour les exigences plus complexes, utilisez la directive « @if ». Cela présente également l’avantage de pouvoir distinguer plus de deux cas :

SASS

SCSS

La syntaxe de la directive vous permet théoriquement de créer un cas pour chaque valeur fournie. Assurez-vous de suivre le « @if » initial avec la directive « @else », que vous pouvez appeler autant de fois que vous le souhaitez, en combinaison avec « if ». Seul le dernier « @else » reste gratuit, vous devez couvrir tous les autres cas.

Chaque langue dispose d’une méthode spécifique pour commenter le texte. Dans SASS, vous le faites de deux façons différentes. D’une part, vous disposez de la même option qu’en CSS : /* */. Utilisez cette méthode pour commenter directement plusieurs lignes. Vous pouvez souvent trouver des commentaires en CSS ou SASS, où chaque ligne du bloc de commentaires commence par un astérisque. Cependant, ce n’est qu’une convention, pas une nécessité.

Il est également judicieux d’ajouter des commentaires au code source SASS. Grâce à un commentaire significatif, le document restera compréhensible pour vous et les autres à l’avenir. Surtout si vous souhaitez configurer des modèles pour d’autres utilisateurs, vous les aidez avec des commentaires lors de l’édition. De nombreux concepteurs de sites Web utilisent également des commentaires pour structurer le code plus clairement. La plupart des langages de programmation et de balisage ont la possibilité d’insérer du texte dans le code qui est ignoré lors de la compilation ou de l’analyse. Ce texte ne concerne que les humains, pas les ordinateurs.

Les programmeurs et concepteurs Web utilisent également des commentaires pour expliquer leur code : pour ce faire, vous placez un code de bloc dont vous n’avez pas besoin actuellement, mais vous ne souhaitez pas supprimer le code source, dans les marqueurs de commentaires correspondants.

Chaque langue a une méthode spécifique pour commenter le texte. Dans SASS, vous le faites de deux manières différentes. D’une part, la même option est disponible pour vous comme dans CSS : /**/. Utilisez cette méthode pour commenter plusieurs lignes directement. Vous pouvez souvent trouver des commentaires en CSS ou SASS, chaque ligne du bloc de commentaires commençant par un astérisque. Cependant, ceci est juste une convention, pas une nécessité.

En plus de la méthode déjà connue de CSS, vous pouvez également commenter des lignes individuelles dans SASS avec //:

La différence entre les deux méthodes réside également dans le fait que, avec les paramètres par défaut, la première variante est transférée dans le CSS compilé, tandis que la seconde variante est tout simplement perdue. Quoi qu’il en soit, vous devez laisser un document CSS contenant des commentaires dans le code être mis en ligne en tant que version du produit. Pour ce faire, utilisez une version réduite que les navigateurs peuvent charger plus rapidement.