Sass (langage)

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

Pour les articles homonymes, voir Sass.

Sass
Date de première version le 28 novembre 2006
Développeurs Natalie Weizenbaum, Chris Eppstein
Dernière version 3.6.5[1] (21 mai 2021)
Influencé par CSS
YAML
Haml
Licence MIT[2]
Site web sass-lang.com

Sass est disponible en deux syntaxes. La syntaxe originale, appelée "syntaxe indentée"[3] qui utilise l'indentation pour séparer les blocs de code et les sauts de ligne pour les séparer les directives. La nouvelle syntaxe, "SCSS", utilise les mêmes séparateurs de blocs que CSS. Les fichiers de la syntaxe indentée et SCSS utilisent respectivement les extensions .sass et .scss.

La syntaxe indentée 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éritage des sélecteurs.

Caractéristiques

Variables

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 CSS compilé
$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

Liens externes

Notes et références
  1. Github Releases (en)
  2. Site officiel (en)
  3. La syntaxe indentée (en)
  4. Syntaxes Sass (en)
  5. Structure d'une feuille de style (Documentation) (en)
  6. Fonctions spéciales (Documentation) (en)
  7. Contributeurs MDN, « Préprocesseur CSS »
  • Portail de l’informatique
  • Portail d’Internet
Cet article est issu de Wikipedia. Le texte est sous licence Creative Commons - Attribution - Partage dans les Mêmes. Des conditions supplémentaires peuvent s'appliquer aux fichiers multimédias.