Syntactically
Awesome
StyleSheets
sass : culot, toupet
sassy : vif, fougueux ;
insolent, impertinent
Sass est-il vif ?
est-il fougueux ?
Sass est-il insolent ?
impertinent ?
Sass est-il
“awesome” ??
I. Qu'est-ce que c'est que Sass ?
( histoire, définition, description générale )
?
?
?
?
?
Sass est une extension de CSS qui ajoute puissance et élégance au langage de base.
Source : documentation sass-lang.com
Sass est :
• un préprocesseur CSS
• né fin 2006 (initialement
développé en Ruby* par Hampton
Catlin et Nathalie Weizenbaum)
• dernière version : 3.4.23
(Chris Eppstein, fin 2016)
• sous licence : logiciel libre, open source
& non copy left
Deux syntaxes :
• Sass • SCSS
(syntaxe originelle) (v. 3.0)*
NB : strictement équivalentes en termes de fonctionnalités
À RETENIR
Sass prétend :
• rester simple et accessible
• rester proche de CSS dans sa forme
• compenser les lacunes de CSS
• apporter des fonctionnalités nouvelles
II. Comment
Sass marche ?
( fonctionnement en détail )
Installation & compatibilités
• Sass SassScript
• Windows / Mac / Linux
• principaux IDE (plug-in Netbeans)
• applications gratuites : Scout, Koala
• applications et frameworks payants : CodeKit (Mac), Compass, Foundation...
Un CSS amélioré :
1 • utilise des variables
2 • permet l'imbrication (nesting)
3 • autorise l'héritage (inheritance)
4 • autorise l'usage de boucle (loop)
5 • autorise l'usage d'arguments
NB : Sass conforme CSS aux langages de OOP.
1 • Usage de variables :
• Sass • CSS “pur”
NB : retenez “ !global ” (car variable déclarée dans un bloc a une portée locale).
2 • Nesting :
• Sass • CSS “pur”
NB : valable pour les media queries.
2 • Nesting (suite) :
• Sass • CSS “pur”
Important : en SCSS, retenez “ @mixin ” “ @include ” (pour “ = ” et “ + ”).
3 • Héritage :
• Sass • CSS “pur”
NB : possible inclusion de feuilles de style partiales.
4 • Boucles :
• Sass • CSS “pur”
NB : notez la façon dont la variable '$i'
est affectée à chaque 'square'...
5 • Arguments :
• Sass • CSS “pur”
Important : de fait, il y a des fonctions en Sass.
Ex : to-lower-case(ABCD) => abcd
III. Pourquoi
utiliser Sass ?
( points forts & points faibles )
-
+
+
-
+
-
Pourquoi choisir Sass ?
• proche de CSS
• CSS optimisé (OOP)
• reste précis dans son action
MAIS
• langage développeur (et la doc est fastidieuse...)
• implémentation (cf LibSass, pyScss, node-sass, Sai...)
Sass est assez vif
Sass est fougueux
Sass est awesome
MAIS
Sass n'est pas si impertinent
(il ne révolutionne pas assez CSS...).
THAT'S ALL SASS...!
Sources :
• articles wikipedia (FR & ENG)
• site officiel : sass-lang.com (ENG)
• site sass-guidelin.es/fr (FR)
• site la-cascade.io/se-lancer-dans-sass (FR)
• tutoriels Sass youtube (Derek Banas...)
• avis d'utilisateurs : blog.humandecoders.com
