Accélérez vos développementsCSS avec SASS

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 …

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

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

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

LES PARTIELSUne structure maintenable

Une inclusion intelligente des feuilles de styles grâce à @import + _ + .scss

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

LES VARIABLESSCSS CSS

ImbricationsSCSS CSS

Imbrications mieux ou pas SCSS CSS

Sélécteurs avancés : > + ~ *

SCSS CSS

Sélécteur d’attachement et parent : &SCSS CSS

mixinsSCSS CSS

Mixins encore mieux !SCSS CSS

Héritage : @extend

SCSS CSS

FONCTIONSSCSS CSS

FONCTIONS encore plus mieuxSCSS CSS

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

MERCI !!!