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