Sass (langage)
Pour les articles homonymes, voir Sass.
Sass | ||
Date de première version | le 28 novembre 2006, il y a 17 ans | |
---|---|---|
Développeurs | Natalie Weizenbaum, Chris Eppstein | |
Dernière version | 3.6.5[1] (21 mai 2021) | |
Influencé par | Feuille de style en cascade YAML Haml | |
Licence | MIT[3] | |
Site web | sass-lang.com | |
modifier |
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.
Sass est disponible en deux syntaxes. La syntaxe originale, appelée "syntaxe indentée"[4] 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[5].
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 ($
)[6]. L'affectation des variables se fait avec les deux-points (:
)[7]. Les variables peuvent être des arguments ou des résultats de l'une des nombreuses fonctions disponibles[8]. 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
- Less
- (en) PostCSS
- (en) Stylus[9]
Liens externes
- (en) Site officiel
Notes et références
- ↑ Github Releases (en)
- ↑ « http://sass-lang.com/documentation/file.SASS_CHANGELOG.html »
- ↑ Site officiel (en)
- ↑ La syntaxe indentée (en)
- ↑ Syntaxes Sass (en)
- ↑ https://sass-lang.com/documentation/variables
- ↑ Structure d'une feuille de style (Documentation) (en)
- ↑ Fonctions spéciales (Documentation) (en)
- ↑ Contributeurs MDN, « Préprocesseur CSS »
- Portail de l’informatique
- Portail d’Internet