Si vous avez déjà créé un site Web, vous con­nais­sez pro­ba­ble­ment bien CSS. Cependant, vous avez peut-être également oublié certaines fonc­tion­na­li­tés cachées lorsque vous utilisez le langage de feuilles de style. Concevoir des sites Web avec CSS peut être très fas­ti­dieux, raison pour laquelle de nombreux dé­ve­lop­peurs font main­te­nant confiance à SASS. Derrière l’acronyme se cache une promesse : des feuilles de style syn­taxi­que­ment im­pres­sion­nantes. SASS est à la fois un pré­pro­ces­seur et un langage de feuille de style.

Le fait qu’il s’agisse d’un pré­pro­ces­seur 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 ex­pli­quons également comment cette étape fonc­tionne dans le tutoriel SASS détaillé. Pour sim­pli­fier l’ap­pren­tis­sage du SASS, nous allons vous guider étape par étape et tout expliquer avec des exemples.

Conseil

Vous trouverez plus d’in­for­ma­tions dans notre article de pré­sen­ta­tion de SASS.

Exigences SASS

SASS est, en principe, in­dé­pen­dant de la pla­te­forme, 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 con­sé­quent, le langage de pro­gram­ma­tion doit être intégré à votre système. Ruby doit être préins­tallé dans macOS. Pour les PC Windows, vous pouvez utiliser le Ru­byIns­tal­ler. Le package d’ins­tal­la­tion contient la langue, un en­vi­ron­ne­ment de dé­ve­lop­pe­ment (dont vous n’avez pas besoin pour SASS) et de la do­cu­men­ta­tion. L’ins­tal­la­tion est également facile pour les uti­li­sa­teurs de Linux.

Conseil

Il existe également des packages d’ins­tal­la­tion pratiques pour d’autres systèmes. Une liste peut être trouvée sur le site officiel de Ruby.

Le projet LibSASS intègre également SASS à d’autres langages de pro­gram­ma­tion : C/C++, Java, Ja­vaS­cript, Node PHP, Python et quelques autres langages dis­po­nibles. En utilisant des wrappers ap­pro­priés (un outil de mise en œuvre), vous pouvez tirer parti d’autres langages de pro­gram­ma­tion. LibSASS, conçu pour les bi­blio­thèques, ainsi que des in­for­ma­tions sur les wrappers dis­po­nibles, à retrouver sur le site officiel du projet.

Installer SASS

Il existe plusieurs façons d’installer SASS sur votre système. Entre-temps, plusieurs ap­pli­ca­tions 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 dis­po­nibles gra­tui­te­ment en tant que logiciels open source. En principe, toutefois, vous n’avez pas besoin de pro­grammes sup­plé­men­taires pour utiliser SASS sur votre système. Ruby contient le gem du ges­tion­naire de packages, avec laquelle le langage de feuille de style peut être fa­ci­le­ment im­plé­menté à l’aide d’une ligne de commande. Pour ce faire, ouvrez le terminal ou l’invite de commande et entrez la commande suivante:

gem install sass

Cela devrait suffire. Si vous recevez un message d’erreur, il est toutefois possible que vous n’ayez pas les droits d’ins­tal­la­tion né­ces­saires. 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’ad­mi­nis­tra­teur à l’aide du bouton droit de la souris (Windows). Pour vérifier si l’ins­tal­la­tion a réussi et est à jour, demandez à SASS quelle version est installée: 

sass -v

En plus de l’ins­tal­la­tion, vous devez également con­fi­gu­rer la com­pi­la­tion. Pour que votre code SASS fonc­tionne 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 pro­grammes pour installer SASS, vous pouvez également l’utiliser pour la com­pi­la­tion. Si vous tra­vail­lez 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 com­pi­la­tion pour vous. Cependant, vous pouvez également effectuer l’étape de con­ver­sion à partir de la ligne de commande.

SASS offre aux uti­li­sa­teurs la pos­si­bi­lité de re­com­pi­ler après chaque mo­di­fi­ca­tion du code source ou d’activer un mode de sur­veil­lance. Dans ce dernier cas, le com­pi­la­teur vérifie un fichier ou un dossier complet et effectue la con­ver­sion au­to­ma­ti­que­ment. Pour sur­veil­ler, utilisez la ligne de commande pour accéder au dossier de votre site Web et lancer l’une des deux commandes suivantes :

sass --watch example.sass:example.css

Vous pouvez sur­veil­ler 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 con­sé­quence, et vous pouvez sur­veil­ler tout le dossier :

sass --watch sass:css

Dès que vous modifiez et en­re­gis­trez les fichiers SASS, le com­pi­la­teur écrase au­to­ma­ti­que­ment les fichiers CSS existants avec les versions les plus récentes.

Vous sou­hai­te­rez peut-être déplacer votre site Web existant, déjà écrit en CSS tra­di­tion­nel, vers SASS. Vous devrez également convertir votre ancien code CSS. Avant de faire cela, toutefois, vous devez dé­ter­mi­ner 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 con­ver­sions :

sass-convert example.css example.sass
sass-convert example.css example.scss

Le con­ver­tis­seur lit les formats cor­res­pon­dants à partir des ex­ten­sions 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 con­ver­sion est optimale : renommez vos fichiers : au lieu de «.css », tapez sim­ple­ment «.scss ». Tout code écrit avec des règles CSS fonc­tionne également sous SCSS.

SASS : la syntaxe du langage de feuille de style

Comme mentionné pré­cé­dem­ment, il existe plus d’une syntaxe lorsqu’il s’agit de SASS. Deux formats con­cur­rents se sont établis. À l’origine, SASS était basé sur la syntaxe main­te­nant connue comme l’in­den­ta­tion comme syntaxe, les in­den­ta­tions dé­clen­chant l’im­bri­ca­tion et un saut de ligne mettant ef­fec­ti­ve­ment 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 fonc­tionne quelle que soit la syntaxe, nous allons présenter la procédure dans les deux formats. Voici un guide pas à pas des par­ti­cu­la­ri­tés du SASS.

Conseil
Si vous souhaitez sim­ple­ment tester le langage de la feuille de style, vous pouvez le faire dans votre na­vi­ga­teur, en utilisant Sass.js Play­ground ou Sass­Meis­ter, entrez votre code en ligne et créez di­rec­te­ment le code source cor­res­pon­dant en CSS.

Variables

La plupart des dé­ve­lop­peurs Web ap­pré­cient l’uti­li­sa­tion de variables dans SASS. Avec cette fonction utile, vous pouvez en­re­gis­trer des in­for­ma­tions sous un alias et les réu­ti­li­ser où vous le souhaitez. Les variables sont très po­pu­laires en termes de spé­ci­fi­ca­tions de couleur et de taille, par exemple. Une variable peut être utilisée pour stocker la valeur hexa­dé­ci­male d’une couleur ou pour ajuster une taille fixe à l’aide de fonctions ma­thé­ma­tiques. Les variables sont in­tro­duites dans SASS avec un signe dollar ($) :

SASS

$bg-color: #df0174
$size: 1em

SCSS

$bg-color: #df0174;
$size: 1em;

Ensuite, vous devez sim­ple­ment insérer les variables aux endroits ap­pro­priés dans le code :

SASS

$bg-color: #df0174
$size: 1em
body
background-color: $bg-color
margin: $size * 2

SCSS

$bg-color: #df0174;
$size: 1em;
body {
background-color: $bg-color;
margin: $size * 2;
}

Lors de la com­pi­la­tion, le com­pi­la­teur adapte enfin la syntaxe à CSS et résout les variables :

CSS

body {
background-color: #df0174;
margin: 2em;
}
Note
Lorsque vous nommez des valeurs de couleur sous forme de variables, deux principes dif­fé­rents sont établis. Certains dé­ve­lop­peurs trouvent pratique de nommer di­rec­te­ment la couleur ($pink), d’autres préfèrent spécifier son objectif ($bg-color). En principe, toutefois, vous pouvez choisir librement le nom des variables.

Il peut être utile de spécifier une valeur par défaut pour certaines variables. Sauf in­di­ca­tion contraire, SASS assume ces in­for­ma­tions. In­ver­se­ment, si vous dé­fi­nis­sez la variable dif­fé­rem­ment, les in­for­ma­tions par défaut sont ignorées. Ceci peut être utile, par exemple, si un dé­ve­lop­peur transmet un produit incomplet à un client qui souhaite encore apporter des mo­di­fi­ca­tions, ou si un web designer utilise son propre modèle. Vous pouvez créer un pré­ré­glage comme celui-ci en dé­fi­nis­sant un in­di­ca­teur « !default » flag. Vous pouvez entrer des valeurs normales et des variables déjà définies :

SASS

$text-color: #000000 !default
$background-color: $bg-color !default

SCSS

$text-color: #000000 !default;
$background-color: $bg-color !default;

Importer

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é­fi­nis­sez toutes les variables (vous pouvez ici spécifier et nommer toutes les valeurs de couleur requises), puis importer le fichier. Utilisez main­te­nant les in­for­ma­tions du fichier importé comme si elles se trou­vaient 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é­per­toires. La fonction gère même l’im­por­ta­tion de plusieurs fichiers en une seule étape :

SASS

@import "variables"
@import "partials/styles"
@import "partials/test-a", "partials/test-b"

SCSS

@import "variables";
@import "partials/styles";
@import "partials/test-a", "partials/test-b";

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 au­to­ma­ti­que­ment que vous entendez ces types de fichiers. Vous pouvez également inclure des fichiers CSS. Cependant, vous spécifiez également l’extension pour que l’or­di­na­teur sache exac­te­ment ce que vous voulez dire. Compiler résout également cette sim­pli­fi­ca­tion : le code CSS final ne contient plus la directive, mais uni­que­ment les in­for­ma­tions des fichiers cor­res­pon­dants.

Partiels

Les partiels sont la chose la plus courante que vous im­por­te­rez lorsque vous tra­vail­le­rez avec SASS. Les partiels sont des fragments de code, et ils vous per­met­tent de créer des modules que vous pouvez fa­ci­le­ment installer encore et encore. Si vous nommez le fichier, il est important de placer un trait de sou­lig­ne­ment avant le nom réel. Cela informe le com­pi­la­teur que le fichier cor­res­pon­dant ne nécessite pas de con­tre­par­tie CSS. Sinon, le système con­ver­ti­rait tous les fichiers SASS en CSS s’il était cor­rec­te­ment surveillé.

Si vous importez les partiels, omettez l’un­ders­core. SASS sait également de quel fichier vous parlez. Par con­sé­quent, il est né­ces­saire que vous ne créiez pas de fichiers portant le même nom. Si vous avez à la fois « exemple.sass » et « _example.sass », cela en­traî­nera une erreur. Ceci s’applique également aux ex­ten­sions de fichier : « exemple.sass » et « exemple.scss » ne doivent pas figurer dans le même ré­per­toire.

Mixins

Les mixins sont une autre directive im­por­tante. 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 à tra­vail­ler plus ra­pi­de­ment et à garder le code plus simple. Tout ce qui est permis dans SASS peut être inclus dans un mixin : règles, pa­ra­mètres ou fonctions. Même si l’espace dans le mixin n’a pas de res­tric­tions, il ne devrait pas contenir plus de vingt lignes. Le but ultime est d’accroître la sim­pli­cité au lieu de tout com­pli­quer davantage.

Pour gérer ef­fi­ca­ce­ment les mixins, vous avez besoin de deux di­rec­tives : « @mixin » et « @include ». Avec la première, vous créez le modèle, avec la seconde, vous incluez le bloc de code :

SASS

@mixin big-blue-text
font-family: Arial
font-size: 25px
font-weight: bold
color:#0000ff

SCSS

@mixin big-blue-text {
font-family: Arial;
font-size: 25px;
font-weight: bold;
color:#0000ff;
} 
}

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

SASS

@include big-blue-text

SCSS

@include big-blue-text;

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

3wXqwX4nu8I.jpg Pour afficher cette vidéo, des cookies de tiers sont nécessaires. Vous pouvez consulter et modifier vos paramètres de cookies ici.

Étendre

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

SASS

.button-scope
    margin: 5px
    border-radius: 2px
.home-button
    @extend .button-scope
    background-color: $black
.back-button
    @extend .home-button

SCSS

.button-scope {
    margin: 5px;
    border-radius: 2px;
}
.home-button {
    @extend .button-scope;
    background-color: $black;
}
.back-button {
    @extend .home-button;
}

The compiler resolves the code as follows:

CSS

.button-scope, .home-button, .back-button {
margin: 5px;
border-radius: 2px;
}
.home-button, .back-button {
background-color: #000000;
}

Dans certaines si­tua­tions, vous dé­fi­nis­sez l’apparence d’une catégorie que vous ne souhaitez pas utiliser sur votre site Web réel, à l’aide du for­mu­laire @extend. Cela se produit fré­quem­ment lorsque vous cons­trui­sez votre propre bi­blio­thèque. SASS propose des sé­lec­teurs de subs­ti­tu­tion pour ces si­tua­tions. Vous utilisez un signe de pour­cen­tage (%) pour iden­ti­fier une classe que vous créez uni­que­ment pour une uti­li­sa­tion dans d’autres classes. Si vous n’importez pas ce type de sélecteur lors de la con­cep­tion de votre site Web, SASS ne le compilera pas dans CSS :

SASS

%module
    margin: 20px
    padding: 10px
    color: $bg-color
.post
    @extend %module
    color: $grey

SCSS

%module {
    margin: 20px;
    padding: 10px;
    color: $bg-color;
}
.post {
    @extend %module;
    color: $grey;
}

Dans le code CSS final, la classe « module » n’apparaît plus. Leurs pro­prié­tés sont passées di­rec­te­ment à la classe « post ».

CSS

.post {
margin: 20px;
padding: 10px;
color: …;
}
.post {
color: #D3D3D3;
}

L’in­di­ca­teur « !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 com­pi­la­tion. Avec !optional, vous pouvez éviter cela. SASS ignorera sim­ple­ment la commande s’il ne trouve pas de classe ap­pro­priée.

Conseil

Les effets de mixins et de « @extend » sont très si­mi­laires et, dans la plupart des cas, il est logique d’utiliser mixins. Un article détaillé sur les dif­fé­rences peut être trouvé sur css­wi­zar­dry.com.

Nesting

En HTML, il va sans dire que le code est divisé en une ar­bo­res­cence hié­rar­chique. CSS ignore cette fonction et oblige l’uti­li­sa­teur à déclarer des pro­prié­tés encore et encore. SASS apporte la pos­si­bi­lité de réin­té­grer les feuilles de style en per­met­tant aux sous-ca­té­go­ries d’hériter des pro­prié­tés de la catégorie parente. Cela garantit également que le code reste glo­ba­le­ment plus fin et que le travail né­ces­saire pour écrire et attendre est moins long. Par exemple, il est possible de définir l’apparence des liens et de dé­ter­mi­ner dans l’im­bri­ca­tion 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’es­per­luette (&) est utilisée pour remplacer une partie du sélecteur par le parent.

SASS

a
    color: $blue
    &:visited
        color: $red
    &:hover
        color: $purple

SCSS

a {
    color: $blue;
    &:visited {
        color: $red;
    }
    &:hover {
        color: $purple;
    }
}

Lors de la com­pi­la­tion, le nesting doit être à nouveau résolu. En CSS, chaque état réap­pa­raît défini sé­pa­ré­ment.

CSS

a {
color: #0000FF;
}
a:visited {
color: #FF0000;
}
a:hover {
color: #551A8B;
}

Outre la ré­so­lu­tion du nesting, la com­pi­la­tion garantit également que les variables (dont nous avons omis la dé­fi­ni­tion dans l’exemple) re­de­vien­nent des valeurs hexa­dé­ci­males.

Note

Le nesting est un outil très utile pour maintenir le code source de la feuille de style propre et efficace. Cependant, il existe une tendance à su­rex­ploi­ter cette pos­si­bi­lité d’im­bri­ca­tion, inversant ainsi l’effet réel et créant un système de struc­tu­ra­tion complexe. Ceci peut causer des problèmes, notamment lors des mo­di­fi­ca­tions et de la main­te­nance. Pour cette raison, évitez les sub­di­vi­sions à partir du troisième niveau.

Avec le nesting, vous pouvez également trans­mettre des « pro­prié­tés ». CSS connaît certaines ca­rac­té­ris­tiques ap­par­te­nant à la même famille. Par exemple, toutes les in­for­ma­tions de formatage de police ap­par­tien­nent à la même famille, mais doivent être définies en CSS en tant que points in­di­vi­duels, avec leurs noms de propriété complets. SASS vous donne la pos­si­bi­lité de regrouper les pro­prié­tés in­di­vi­duelles sous les noms de famille.

SASS

.example
font:
    family: serif
    style: normal
    size: medium

SCSS

.example {
font: {
        family: serif;
        style: normal;
        size: medium;
    }
}

Fonctions

SASS dispose de nom­breuses fonctions pour faciliter l’uti­li­sa­tion de votre feuille de style. Il s’agit de workflows pré­fa­bri­qués que vous auriez dû exécuter ma­nuel­le­ment. Les fonctions peuvent être affectées à dif­fé­rentes ca­té­go­ries :

  • Couleurs : ces fonctions per­met­tent d’ajuster les valeurs de couleur, la sa­tu­ra­tion, la trans­pa­rence et de nom­breuses autres pro­prié­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 pro­prié­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 au­to­ma­ti­que­ment une chaîne entre guil­le­mets d’un texte complet en ma­jus­cules.
  • Sé­lec­teurs : avec cette catégorie de fonctions, vous pouvez manipuler des sé­lec­teurs complets. Par exemple, « selector unif y ()» vous permet de créer un sélecteur sur deux. Cela peut vous faire éco­no­mi­ser 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 struc­tures de données composées de clés et de pro­prié­tés. Les fonctions cor­res­pon­dantes ma­ni­pu­lent les col­lec­tions. Par exemple, vous pouvez fusionner deux cartes ou supprimer une clé spé­ci­fique d’une carte.
  • In­tros­pec­tion : les fonctions de cette zone donnent un aperçu du contenu complet de la feuille de style. Par exemple, vérifiez si une fonc­tion­na­lité, un mixin ou une fonction spé­ci­fique 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 dif­fé­rence est expliquée dans la section «bran­che­ment» ci-dessous.
Conseil

Une liste complète de fonctions SASS qui sont déjà inclus dans le package d’ins­tal­la­tion se trouvent dans la do­cu­men­ta­tion of­fi­cielle du langage de la feuille de style. Vous pourrez y trouver une brève ex­pli­ca­tion de chaque fonction.

Vous insérez toujours des fonctions dans votre code selon le même modèle : chaque fonction a un nom in­di­vi­duel et contient certains pa­ra­mètres entre pa­ren­thè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

$color-1: #ffff00
$color-2: #0000ff
body
background-color: mix($color-1, $color-2, 30%)

SCSS

$color-1: #ffff00;
$color-2: #0000ff;
body {
background-color: mix($color-1, $color-2, 30%);
}

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 en­re­gis­trées en tant que variables, vous pouvez placer les valeurs hexa­dé­ci­males di­rec­te­ment 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 hexa­dé­ci­male de la couleur ré­sul­tante :

CSS

body {
    background-color: #4d4db3;
}

Toutes les fonctions men­tion­né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 si­mi­laires 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 » cor­res­pon­dante. En fait, vous créez toujours une fonction avec une paire de di­rec­tives. En plus de la « fonction @ », un « @retour » intégré est requis pour définir la valeur de sortie :

SASS

$column-count: 12
@function column-width($num)
@return $num * 100% / $column-count
.three-columns 
width: column-width(3)

SCSS

$column-count: 12;
@function column-width($num) {
@return $num * 100% / $column-count;
}
.three-columns {
width: column-width(3);
}

Vous pouvez utiliser la fonction exemple pour effectuer un calcul de largeur de colonne pour une grille de pré­sen­ta­tion. Dans cet exemple, il y a 12 colonnes. Dans l’étape suivante, nommez la fonction et dé­fi­nis­sez le nombre de pa­ra­mètres qu’elle contient. Dans cet exemple, il s’agit d’un nombre. De plus, nous dé­ter­mi­nons 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 pa­ra­mètres. Seule la valeur ré­sul­tante est stockée dans le CSS final :

CSS

.three-columns {
    width: 25%;
}
Conseil

Vous pouvez utiliser des ca­rac­tères de liaison ou l’un­ders­core dans le nom lors de la création de fonctions. Si vous appelez la fonction plus tard, la dis­tinc­tion importe peu. « Nom-fonction » et « nom fonction » sont la même fonction.

duFZT7Pdoxk.jpg Pour afficher cette vidéo, des cookies de tiers sont nécessaires. Vous pouvez consulter et modifier vos paramètres de cookies ici.

Boucles

Les boucles donnent au langage feuille de style l’attrait d’un véritable langage de pro­gram­ma­tion. Utilisez des boucles pour créer des blocs d’ins­truc­tions dans SASS qui se répètent jusqu’à ce qu’une condition que vous spécifiez se produise. Trois di­rec­tives dif­fé­rentes sont dis­po­nibles pour créer des boucles :

  • @for
  • @while
  • @each

La boucle « @for » est le cas standard d’une boucle dans le contexte de la pro­gram­ma­tion. 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

@for $i from 1 through 4
    .width-#{$i}
width: 10em + $i
@for $i from 1 to 4
    .height-#{$i}
height: 25em * $i

SCSS

@for $i from 1 through 4 {
    .width-#{$i} { width: 10em + $i; }
}
@for $i from 1 to 4 {
    .height-#{$i} { height: 25em * $i; }
}

Après la directive, vous spécifiez d’abord une variable ($i), puis dé­fi­nis­sez le point de départ (1) et le point de des­ti­na­tion (4). Avec « through », vous spécifiez que la quatrième ré­pé­ti­tion 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 su­pé­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.

Remarque

“#{}” est une « in­ter­po­la­tion » en SASS. Cela vous permet de combiner une variable avec un iden­ti­fiant auto-attribué.

Deuxiè­me­ment, écrivez entre accolades ou en retrait ce qui est censé se passer. Dans notre exemple, une spé­ci­fi­ca­tion de taille est manipulée avec une valeur crois­sante pour chaque exécution. Une entrée distincte apparaît alors dans le CSS pour chaque exécution :

CSS

.width-1 {
width: 11em;
}
.width-2 {
width: 12em;
}
.width-3 {
width: 13em;
}
.width-4 {
width: 14em;
}
.height-1 {
height: 25em;
}
.height-2 {
height: 50em;
}
.height-3 {
height: 75em;
}

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

SASS

$i: 1
@while $i < 5
    .width-#{$i}
width: 10em + $i
    $i: $i + 1

SCSS

$i: 1;
@while $i < 5 {
    .width-#{$i} { width: 10em + $i; }
    $i: $i + 1;
}

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é­ti­tions sont ef­fec­tuées. Dans notre exemple, la boucle s’exécute tant que la variable est in­fé­rieure à 5. L’ins­truc­tion dans la boucle est ini­tia­le­ment 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 com­pi­la­teur SASS soit arrêté. Cependant, à la fin, vous obtenez le même code CSS que dans la boucle «@for».

La directive « @each », en revanche, fonc­tionne lé­gè­re­ment dif­fé­rem­ment. Cette boucle est basée sur une liste : la boucle parcourt une col­lec­tion de données que vous avez définie. Pour chaque entrée, « @each » fait sa propre ré­pé­ti­tion. Par exemple, il serait possible de générer à nouveau le même résultat, comme pour les autres boucles, en spé­ci­fiant 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 in­for­ma­tions que les valeurs nu­mé­riques dans la liste - par exemple utilisez « @each » pour insérer dif­fé­rentes images dans votre con­cep­tion. Vous pouvez soit entrer les données di­rec­te­ment dans la directive, soit entrer la liste dans une variable, puis l’appeler.

SASS

$list: dog cat bird dolphin
@each $i in $list
    .image-#{$i}
        background-image: url(‘/images/#{$i}.png’)

SCSS

$list: dog cat bird dolphin;
@each $i in $list {
    .image-#{$i} { background-image: url(‘/images/#{$i}.png’); }
}

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 con­cep­tion fonc­tionne plus tard, vous devez d’abord avoir stocké les images cor­res­pon­dantes dans le chemin spécifié. La boucle garantit au­to­ma­ti­que­ment que la variable reprend l’entrée suivante.

CSS

.image-dog {
background-image: url("/images/dog.png");
}
.image-cat {
background-image: url("/images/cat.png");
}
.image-bird {
background-image: url("/images/bird.png");
}
.image-dolphin {
background-image: url("/images/dolphin.png");
}

Ra­mi­fi­ca­tion

En plus des boucles, SASS vous fournit un autre moyen issu du monde de la pro­gram­ma­tion : créer des branches selon le principe if-then-else. Avec la directive « @if », vous n’exécutez une ins­truc­tion que si un certain état existe, sinon une autre commande prend effet. Outre la directive, il existe également une fonction if(). Les deux sont in­dé­pen­dants l’un de l’autre, mais peuvent également se produire ensemble. La fonction elle-même peut fa­ci­le­ment être expliquée. Elle contient trois pa­ra­mètres : les con­di­tions et deux sorties dif­fé­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

$black: #000000
$white: #ffffff
$text-color: $black
body
    background-color: if($text-color == $black, $white, $black)

SCSS

$black: #000000;
$white: #ffffff;
$text-color: $black;
body {
    background-color: if($text-color == $black, $white, $black);
}

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é­fi­ni­rait le fond en noir. Comme vous pouvez le constater à partir de cet exemple, les branches ne sont pas né­ces­sai­re­ment adaptées à la con­cep­tion d’un site Web complet. La directive et la fonction sont prin­ci­pa­le­ment utiles dans les mixins ou les partiels. Cela permet au modèle de mieux répondre à ce qui se passe dans la con­cep­tion finale des valeurs. In­ver­se­ment, 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 re­pro­duire une valeur unique. Pour les exigences plus complexes, utilisez la directive « @if ». Cela présente également l’avantage de pouvoir dis­tin­guer plus de deux cas :

SASS

$black: #000000
$white: #ffffff
$lightgrey: #d3d3d3
$darkgrey: #545454
@mixin text-color($color)
@if ($color == $black)
background-color: $white
@else if ($color == $white)
background-color: $black
@else if ($color == $lightgrey)
background-color: $black
@else
background-color: $white
p
    @include text-color($lightgrey)

SCSS

$black: #000000;
$white: #ffffff;
$lightgrey: #d3d3d3;
$darkgrey: #545454;
@mixin text-color($color) {
@if ($color == $black) {
background-color: $white;
    }
@else if ($color == $white) {
background-color: $black;
    }
@else if ($color == $lightgrey) {
background-color: $black;
    }
@else {
background-color: $white;
    }
}
p {
    @include text-color($lightgrey);
}

La syntaxe de la directive vous permet théo­ri­que­ment 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 com­bi­nai­son avec « if ». Seul le dernier « @else » reste gratuit, vous devez couvrir tous les autres cas.

Com­men­taires

Chaque langue dispose d’une méthode spé­ci­fique pour commenter le texte. Dans SASS, vous le faites de deux façons dif­fé­rentes. D’une part, vous disposez de la même option qu’en CSS : /* */. Utilisez cette méthode pour commenter di­rec­te­ment plusieurs lignes. Vous pouvez souvent trouver des com­men­taires en CSS ou SASS, où chaque ligne du bloc de com­men­taires commence par un as­té­risque. Cependant, ce n’est qu’une con­ven­tion, pas une nécessité.

Il est également judicieux d’ajouter des com­men­taires au code source SASS. Grâce à un com­men­taire sig­ni­fi­ca­tif, le document restera com­pré­hen­sible pour vous et les autres à l’avenir. Surtout si vous souhaitez con­fi­gu­rer des modèles pour d’autres uti­li­sa­teurs, vous les aidez avec des com­men­taires lors de l’édition. De nombreux con­cep­teurs de sites Web utilisent également des com­men­taires pour struc­tu­rer le code plus clai­re­ment. La plupart des langages de pro­gram­ma­tion et de balisage ont la pos­si­bi­lité d’insérer du texte dans le code qui est ignoré lors de la com­pi­la­tion ou de l’analyse. Ce texte ne concerne que les humains, pas les or­di­na­teurs.

Les pro­gram­meurs et con­cep­teurs Web utilisent également des com­men­taires pour expliquer leur code : pour ce faire, vous placez un code de bloc dont vous n’avez pas besoin ac­tuel­le­ment, mais vous ne souhaitez pas supprimer le code source, dans les marqueurs de com­men­taires cor­res­pon­dants.

Chaque langue a une méthode spé­ci­fique pour commenter le texte. Dans SASS, vous le faites de deux manières dif­fé­rentes. D’une part, la même option est dis­po­nible pour vous comme dans CSS : /**/. Utilisez cette méthode pour commenter plusieurs lignes di­rec­te­ment. Vous pouvez souvent trouver des com­men­taires en CSS ou SASS, chaque ligne du bloc de com­men­taires com­men­çant par un as­té­risque. Cependant, ceci est juste une con­ven­tion, pas une nécessité.

/* Ceci est un commentaire.
Tout entre les marques correspondantes
Seront inclues. */
Remarque

Lorsque vous commentez, peu importe si vous écrivez votre code dans SCSS ou dans la « syntaxe en retrait ». Les com­men­taires fonc­tion­nent de la même manière dans les deux syntaxes SASS.

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

// Ceci est un commentaire.
// Tout comme cette ligne.

La dif­fé­rence entre les deux méthodes réside également dans le fait que, avec les pa­ra­mètres par défaut, la première variante est trans­fé­rée dans le CSS compilé, tandis que la seconde variante est tout sim­ple­ment perdue. Quoi qu’il en soit, vous devez laisser un document CSS contenant des com­men­taires dans le code être mis en ligne en tant que version du produit. Pour ce faire, utilisez une version réduite que les na­vi­ga­teurs peuvent charger plus ra­pi­de­ment.

Aller au menu principal