Introduction au SCSS de Service Portal

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 permettent 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 de quelque chose 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.
RGBA($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 le composant vert 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	Disponibilité
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
Légèreté($color)	Obtient le composant de luminosité d’une couleur.	Oui
adjust-hue($color, $degrees)	Modifie la teinte d’une couleur.	Oui
Lighten($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	Disponibilité
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
opacifier($color, $amount)	Rend une couleur plus opaque.	Non
fondu d’entrée ($color, $amount)	Rend une couleur plus opaque.	Non
transparent($color, $amount)	Rend une couleur plus transparente.	Non
fondu sortant ($color, $amount)	Rend une couleur plus transparente.	Non

Autres fonctions de couleur

Fonction	Description	Disponibilité
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 dans le format compris par les filtres IE.	Non

Fonctions de chaînes

Fonction	Description	Disponibilité
non guillemet($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
majuscule($string)	Convertit une chaîne en majuscules.	Non
en minuscules($string)	Convertit une chaîne en minuscules.	Non

Fonctions numériques

Fonction	Description	Disponibilité
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
abdominaux ($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, les traitant comme des listes de paires.

Fonction	Description
longueur($list)	Renvoie la longueur d’une liste.
nième ($list, $n)	Renvoie un élément spécifique dans une liste.
set-nth($list, $n, $value)	Remplace le énième élément dans une liste.
join($list 1, $list 2)	Joint 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.

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 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 rendu, 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 a 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 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 pour 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.