Introduction à la SCSS de Service Portal

SCSS est un sous-ensemble de la spécification Syntactically Awesome StyleSheets (Sass) et est une extension de CSS. Chaque 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 les couleurs, les piles de polices ou toute valeur CSS que vous souhaitez réutiliser. SCSS utilise le symbole $ pour faire de quelque chose une variable.

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

• Nombres (y compris les unités)
• Chaînes (avec ou sans guillemets)
• 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. Lors de 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 du compilateur SCSS du portail de services.

Fonctions RVB

Fonction	Description
rvb($red, $green, $blue)	Crée une couleur à partir de valeurs rouges, vertes et bleues.
rgba($red, $green, $blue, $alpha)	Crée une couleur à partir des valeurs rouge, verte, bleue et alpha.
rouge($color)	Obtient la composante rouge d’une couleur.
vert($color)	Obtient la composante verte d’une couleur.
bleu($color)	Obtient la composante bleue 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 d’alpha.	Oui
teinte($color)	Obtient la composante de teinte d’une couleur.	Oui
Saturation($color)	Obtient la composante de saturation d’une couleur.	Oui
Légèreté($color)	Obtient la composante de luminosité 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)	Rend une couleur plus foncée.	Oui
Saturé($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)	Modifie le composant alpha d’une couleur.	Oui
opacify($color, $amount)	Rend une couleur plus opaque.	Non
Fondu d’entrée ($color, $amount)	Rend une couleur plus opaque.	Non
transparentize($color, $amount)	Rend une couleur plus transparente.	Non
Fondu ($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
scale-color()	Met à l’échelle de manière fluide une ou plusieurs propriétés d’une couleur.	Oui
change-color()	Modifie 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înes

Fonction	Description	Graphique des disponibilités
sans guillemet($string)	Supprime les guillemets d’une chaîne.	Oui
citation($string)	Ajoute des guillemets à une chaîne.	Oui
longueur-str($string)	Renvoie le nombre de caractères d’une chaîne.	Non
str-insérer($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
majuscules($string)	Convertit une chaîne en majuscules.	Non
vers-minuscule($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
arrondi($number)	Arrondit un nombre au nombre entier le plus proche.	Oui
ceil($number)	Arrondit un nombre au nombre entier supérieur.	Oui
étage($number)	Arrondit un nombre entier au nombre entier inférieur.	Oui
ABS($number)	Renvoie la valeur absolue d’un nombre.	Oui
min($numbers...)	Trouve le minimum de plusieurs nombres.	Oui
max($numbers...)	Trouve le maximum de plusieurs nombres.	Oui
aléatoire([$limit])	Renvoie un nombre aléatoire.	Non

Lister les fonctions

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, 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.
ajouter ($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_liste($list)	Renvoie le séparateur d’une liste.

Ajout de 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 d’une manière qui suit 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 dispose d’une poignée d’opérateurs mathématiques standard tels que +, -, *, / et %.

Utilisez des mathématiques simples pour calculer la largeur 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é se présente comme suit :

.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 créer 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é se présente comme suit :

.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.