Introduction au SCSS de Portail de services

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 5 minutes de lecture

    • SCSS est un sous-ensemble de la spécification Syntactically Awesome StyleSheets (Sass) et est une extension de CSS. Toute feuille de style CSS valide est un SCSS valide.

    Variables SCSS

    Les variables SCSS sont un moyen de stocker des informations que vous souhaitez réutiliser dans votre feuille de style. Vous pouvez stocker des éléments tels que des couleurs, des piles de polices ou toute valeur CSS que vous souhaitez réutiliser. SCSS utilise le symbole $ pour faire d’un élément une variable.

    SCSS prend en charge les types de données suivants :

    • Nombres (unités comprises)
    • Chaînes (avec ou sans)
    • Couleurs (nom ou noms)
    • Booléens

    Les variables peuvent également être des arguments ou des résultats de l’une des nombreuses fonctions ou mixins disponibles. Pendant la traduction, les valeurs des variables sont insérées dans le document CSS de sortie.

    Par exemple : 
    $font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100%$font-stack;
  color: $primary-color;
}

    Pour plus d’informations sur Sass, consultez la référence Sass/SCSS.

    Fonctions SCSS

    Liste des fonctions pour le compilateur SCSS de Portail de services.

    Fonctions RVB

    Fonction Description
    rvb($red, $green, $blue) Crée une couleur à partir des valeurs rouge, verte et bleue.
    RVBA($red, $green, $blue, $alpha) Crée une couleur à partir des valeurs rouge, verte, bleue et alpha.
    rouge ($color) Obtient le composant rouge d’une couleur.
    vert($color) Obtient la composante verte d’une couleur.
    bleu ($color) Obtient le composant bleu d’une couleur.
    mix($color 1, $color 2, [$weight]) Mélange deux couleurs ensemble.

    Fonctions HSL

    Fonction Description Graphique des disponibilités
    HSL ($hue, $saturation, $lightness) Crée une couleur à partir des valeurs de teinte, de saturation et de luminosité. Oui
    hsla($hue, $saturation, $lightness, $alpha) Crée une couleur à partir des valeurs de teinte, de saturation, de luminosité et alpha. Oui
    teinte ($color) Obtient le composant de teinte d’une couleur. Oui
    Saturation($color) Obtient le composant de saturation d’une couleur. Oui
    Luminosité ($color) Obtient le composant de clarté d’une couleur. Oui
    adjust-hue($color, $degrees) Change la teinte d’une couleur. Oui
    éclaircir ($color, $amount) Rend une couleur plus claire. Oui
    assombrir ($color, $amount) Assombrit une couleur. Oui
    saturer ($color, $amount) Rend une couleur plus saturée. Oui
    désaturer ($color, $amount) Rend une couleur moins saturée. Oui
    Niveaux de gris ($color) Convertit une couleur en niveaux de gris. Oui
    Complément($color) Renvoie le complément d’une couleur. Non
    inverser($color) Renvoie l’inverse d’une couleur. Non

    Fonctions d’opacité

    Fonction Description Graphique des disponibilités
    alpha($color) Obtient la composante alpha (opacité) d’une couleur. Oui
    opacité ($color) Obtient la composante alpha (opacité) d’une couleur. Oui
    RVBA ($color, $alpha) Change la composante alpha d’une couleur. Oui
    opacifier ($color, $amount) Rend une couleur plus opaque. Non
    fondu d’entrée ($color, $amount) Rend une couleur plus opaque. Non
    Transparence ($color, $amount) Rend une couleur plus transparente. Non
    fondu sortant ($color, $amount) Rend une couleur plus transparente. Non

    Autres fonctions de couleur

    Fonction Description Graphique des disponibilités
    adjust-color() Augmente ou diminue un ou plusieurs composants d’une couleur. Oui
    couleur_échelle() Met à l’échelle de manière fluide une ou plusieurs propriétés d’une couleur. Oui
    change-color() Change une ou plusieurs propriétés d’une couleur. Non
    ie-hex-str() Convertit une couleur au format compris par les filtres IE. Non

    Fonctions de chaîne

    Fonction Description Graphique des disponibilités
    Annuler guillemets ($string) Supprime les guillemets d’une chaîne. Oui
    Citation($string) Ajoute des guillemets à une chaîne. Oui
    str-longueur($string) Renvoie le nombre de caractères dans une chaîne. Non
    str-insert($string, $insert, $index) Insère $insert dans $string à $index. Non
    str-index($string, $substring) Renvoie l’index de la première occurrence de $substring dans $string. Non
    str-slice($string, $start-at, [$end-at]) Extrait une sous-chaîne de $string. Non
    en majuscules ($string) Convertit une chaîne en majuscules. Non
    en minuscules ($string) Convertit une chaîne en minuscules. Non

    Fonctions numériques

    Fonction Description Graphique des disponibilités
    Pourcentage($number) Convertit un nombre sans unité en pourcentage. Oui
    rond($number) Arrondit un nombre au nombre entier le plus proche. Oui
    plafond($number) Arrondit un nombre au nombre entier supérieur. Oui
    Étage($number) Arrondit un nombre au nombre entier précédent. Oui
    ABS ($number) Renvoie la valeur absolue d’un nombre. Oui
    min($numbers...) Recherche le minimum de plusieurs nombres. Oui
    max($numbers...) Recherche le maximum de plusieurs nombres. Oui
    aléatoire ([$limit]) Renvoie un nombre aléatoire. Non

    Fonctions de la liste

    Les listes dans SCSS sont immuables. Toutes les fonctions de liste renvoient une nouvelle liste plutôt que de mettre à jour la liste existante sur place.

    Toutes les fonctions de liste fonctionnent également pour les cartes, en les traitant comme des listes de paires.

    Fonction Description
    longueur($list) Renvoie la longueur d’une liste.
    nth($list, $n) Renvoie un élément spécifique dans une liste.
    set-nth($list, $n, $value) Remplace le nième élément d’une liste.
    join($list 1, $list 2) Réunit deux listes en une seule.
    append($list 1, $val) Ajoute une valeur unique à la fin d’une liste.
    code postal ($lists...) Combine plusieurs listes en une seule liste multidimensionnelle.
    index ($list, $value) Renvoie la position d’une valeur dans une liste.
    séparateur($list) de liste Renvoie le séparateur d’une liste.

    Ajouter des fonctions personnalisées

    Scss @function my-calculation-function($some-number, $another-number){ @return $some-number + $another-number }

    Imbrication SCSS

    SCSS vous permet d’imbriquer vos sélecteurs CSS de manière à suivre la même hiérarchie visuelle que votre HTML.

    Par exemple : 
    nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
    Les sélecteurs ul, li et a sont imbriqués dans le sélecteur de navigation , ce qui est un excellent moyen d’organiser votre CSS et de le rendre plus lisible. Lorsque le widget est affiché, le CSS généré ressemble au bloc de code suivant :
    nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

    Pour plus d’informations sur Sass, consultez la référence Sass/SCSS.

    Opérateurs SCSS

    SCSS comporte une poignée d’opérateurs mathématiques standard tels que +, -, *, / et %.

    Utilisez des mathématiques simples pour calculer les largeurs d’un aparté et d’un article. Par exemple :
    .container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
    Le CSS généré ressemble à :
    .container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

    Pour plus d’informations sur Sass, consultez la référence Sass/SCSS.

    Mixins SCSS

    Un mixin vous permet de faire des groupes de déclarations CSS que vous souhaitez réutiliser sur l’ensemble de votre site. Vous pouvez transmettre des valeurs pour rendre votre mixin plus flexible.

    Le bloc de code suivant est un exemple de border-radius.
    @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
    Le CSS généré ressemble à : 
    .box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

    Pour plus d’informations sur Sass, consultez la référence Sass/SCSS.