Sass (langage)
Pour les articles homonymes, voir Sass.
| Sass | ||
| Logo. | ||
| Date de première version | (19 ans, 309 jours) | |
|---|---|---|
| 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 Voir et modifier les données sur Wikidata |
|
| Licence | MIT [2] | |
| 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»[3] qui utilise l'indentation pour séparer les blocs de code et les sauts de ligne pour les séparer des 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
[modifier | modifier le code ]Variables
[modifier | modifier le code ]Sass permet l'utilisation de variables. Les variables doivent commencer par le symbole dollar ($)[5] . L'affectation des variables se fait avec les deux-points (:)[6] .
Les variables peuvent être des arguments ou des résultats de l'une des nombreuses fonctions disponibles[7] . 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; } |
Voir aussi
[modifier | modifier le code ]Articles connexes
[modifier | modifier le code ]Liens externes
[modifier | modifier le code ]Notes et références
[modifier | modifier le code ]- ↑ « Eleases (en) », sur GitHub.
- ↑ (en) « Site officiel », sur sass-lang.com.
- ↑ (en) « La syntaxe indentée (en) », sur sass-lang.com.
- ↑ (en) « Syntaxes Sass (en) », sur sass-lang.com.
- ↑ (en) « Variables », sur sass-lang.com.
- ↑ (en) « Structure d'une feuille de style (Documentation) (en) », sur sass-lang.com.
- ↑ (en) « Fonctions spéciales (Documentation) (en) », sur sass-lang.com.
- ↑ Contributeurs MDN, « Préprocesseur CSS », sur MDN Web Docs.