Accélérez vos développements CSS avec SASS
-
Upload
silicon-comte -
Category
Technology
-
view
173 -
download
2
description
Transcript of Accélérez vos développements CSS avec SASS
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 : [email protected]
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 !!!