Sass (langage)

Un article de Wikipédia, l'encyclopédie libre.
Sass
Logo.

Date de première version le 2006 novembre 28, il y a 14 ans
Développeurs Natalie Weizenbaum, Chris Eppstein
Dernière version 3.6.5[1] (21 mai 2021)
Influencé par CSS
YAML
HamlVoir et modifier les données sur Wikidata
Licence MIT[2]
Site web sass-lang.com

Sass (Syntactically awesome stylesheets) est un langage de script préprocesseur qui est compilé ou interprété en CSS (Feuilles de styles en cascades). SassScript est le langage de script en lui même.

Sass se compose de deux syntaxes. La syntaxe originale, appelé "la syntaxe indenté"[3] utilise l'indentation pour séparer les blocs de code et les saut de lignes pour les séparer les règles. La nouvelle syntaxe, "SCSS", utilise les même séparateurs de blocs que CSS. Les fichiers de la syntaxe indenté et SCSS utilise respectivement les extensions .sass et .scss.

La syntaxe indenté est un métalangage et SCSS un métalangage imbriqué car un CSS valide est un SCSS valide sans modification de syntaxe[4].

SassScript fournit les mécanismes suivants : variables, imbrication, mixins et héritages des sélecteurs.

Caractéristiques[modifier | modifier le code]

Variables[modifier | modifier le code]

Sass permet l'utilisation de variables. Les variables doivent commencer par le symbole dollar ($). L'affectation des variables se fait avec les deux-points (:).[5] Les variables peuvent être des arguments ou des résultats de l'une des nombreuses fonctions disponibles[6]. Lors de la compilation les variables sont remplacées par leurs valeurs dans le fichier CSS de sortie.

SCSS Sass Compiled CSS
$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}
$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Articles connexes[modifier | modifier le code]

Liens externes[modifier | modifier le code]

Notes et références[modifier | modifier le code]