19
Accélérez vos développements CSS avec SASS

Accélérez vos développements CSS avec SASS

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Accélérez vos développements CSS avec SASS

Accélérez vos développementsCSS avec SASS

Page 2: Accélérez vos développements CSS 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 : [email protected]

Web, Musique, Rigolade, Rencontres, Bières et surtout WEB WEB WEB WEB WEB …

Page 3: Accélérez vos développements CSS avec SASS

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

Page 4: Accélérez vos développements CSS avec SASS

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

Page 5: Accélérez vos développements CSS avec SASS

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

Page 6: Accélérez vos développements CSS avec SASS

LES PARTIELSUne structure maintenable

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

Page 7: Accélérez vos développements CSS avec SASS

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

Page 8: Accélérez vos développements CSS avec SASS

LES VARIABLESSCSS CSS

Page 9: Accélérez vos développements CSS avec SASS

ImbricationsSCSS CSS

Page 10: Accélérez vos développements CSS avec SASS

Imbrications mieux ou pas SCSS CSS

Page 11: Accélérez vos développements CSS avec SASS

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

SCSS CSS

Page 12: Accélérez vos développements CSS avec SASS

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

Page 13: Accélérez vos développements CSS avec SASS

mixinsSCSS CSS

Page 14: Accélérez vos développements CSS avec SASS

Mixins encore mieux !SCSS CSS

Page 15: Accélérez vos développements CSS avec SASS

Héritage : @extend

SCSS CSS

Page 16: Accélérez vos développements CSS avec SASS

FONCTIONSSCSS CSS

Page 17: Accélérez vos développements CSS avec SASS

FONCTIONS encore plus mieuxSCSS CSS

Page 18: Accélérez vos développements CSS avec SASS

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

Page 19: Accélérez vos développements CSS avec SASS

MERCI !!!