SASS (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style. Mohand AIT-HATRIT, développeur frontend au Crédit Agricole de Franche-Comté, vous propose de découvrir les avantages de cette technique de développement.
2. C’est qui ce mec ?!?
Mohand AIT-HATRIT – 32 ans
Développeur Front-End / Webdesigner
Crédit Agricole Franche-Comté
Site web : www.akaflem.com
Twitter : @akaflem
Email : mohand.aithatrit@gmail.com
Web, Musique, Rigolade, Rencontres, Bières et surtout WEB WEB WEB WEB WEB …
3. CSS c’est bien mais c’est vite le …
Feuille de style à rallonge
Répétition des styles
Maintenance de plus en plus complexe
Différence des navigateurs (ex: les préfixes de constructeurs de type –webkit-)
Langage statique
Validité du code et erreur de syntaxe
4. Et la lumière fut : Les préprocesseurs
Métalangage : « la machine écrit pour vous »
Validation du code à la volée
Inclusion de fichier intelligente
Fonctionnalités étendues
(variables, imbrications, mixins, fonctions, boucles, conditions …)
Minification à la volée
5. Sass, Syntactically awesome style sheets
Sass est écrit en Ruby, donc nécessite l’installation de Ruby
S’exécute en ligne de commande
La syntaxe : .SCSS depuis la version 3
INSTALLATION : TOUT EST SUR http://sass-lang.com
gem install sass
6. LES PARTIELS
Une structure maintenable
Une inclusion intelligente des feuilles de styles grâce à @import + _ + .scss
7. C’est bien, mais ca donne quoi ?
Grâce à cette petite ligne de commande magique :
sass --watch scss/styles.scss:css/styles.min.css --style compressed
A chaque modification d’un des fichiers inclus,
une belle feuille de style minifiée sera générée dans le dossier css
18. Pour aller plus loin !
Compass : un métaframework
http://compass-style.org
CSS maintenables avec Sass & Compass de Kaelig Deloumeau-Prigent
http://www.css-maintenables.fr
Sass & Compass avancé de Mehdi Kabab
http://livre-sass-compass.fr