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...
CSS c’est bien mais c’est vite le …
Feuille de style à rallonge
Répétition des styles
Maintenance de plus en plus complexe...
Et la lumière fut : Les préprocesseurs
Métalangage : « la machine écrit pour vous »
Validation du code à la volée
Inclusio...
Sass, Syntactically awesome style sheets
Sass est écrit en Ruby, donc nécessite l’installation de Ruby
S’exécute en ligne ...
LES PARTIELS
Une 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...
LES VARIABLES
SCSS CSS
Imbrications
SCSS CSS
Imbricationsmieux ou pas
SCSS CSS
Sélécteurs avancés : > + ~ *
SCSS CSS
Sélécteur d’attachement et parent : &
SCSS CSS
mixins
SCSS CSS
Mixins encore mieux !
SCSS CSS
Héritage : @extend
SCSS CSS
FONCTIONS
SCSS CSS
FONCTIONS encore plus mieux
SCSS CSS
Pour aller plus loin !
Compass : un métaframework
http://compass-style.org
CSS maintenables avec Sass & Compass de Kaelig ...
MERCI !!!
Prochain SlideShare
Chargement dans…5
×

Accélérez vos développements CSS avec SASS / Digital apéro [06/2014]

994 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
994
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Accélérez vos développements CSS avec SASS / Digital apéro [06/2014]

  1. 1. Accélérez vos développements CSS avec SASS
  2. 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. 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. 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. 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. 6. LES PARTIELS Une structure maintenable Une inclusion intelligente des feuilles de styles grâce à @import + _ + .scss
  7. 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 
  8. 8. LES VARIABLES SCSS CSS
  9. 9. Imbrications SCSS CSS
  10. 10. Imbricationsmieux ou pas SCSS CSS
  11. 11. Sélécteurs avancés : > + ~ * SCSS CSS
  12. 12. Sélécteur d’attachement et parent : & SCSS CSS
  13. 13. mixins SCSS CSS
  14. 14. Mixins encore mieux ! SCSS CSS
  15. 15. Héritage : @extend SCSS CSS
  16. 16. FONCTIONS SCSS CSS
  17. 17. FONCTIONS encore plus mieux SCSS CSS
  18. 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
  19. 19. MERCI !!!

×