Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sass et compass

1,022 views

Published on

les bases de l'intégration sass et compass

Published in: Technology
  • Be the first to comment

Sass et compass

  1. 1. Compass Et autres extensions ou «préprocesseurs CSSlundi 16 juillet 12 1
  2. 2. Convention d’écriture Texte Lien Code / $ Command Remarquelundi 16 juillet 12 2
  3. 3. Ce n’est pas : Une amélioration du support de CSS dans nos navigateurslundi 16 juillet 12 3
  4. 4. Pourquoi étendre CSS ? CSS natif, plutôt se pendre. • CSS est plat (Troll inside :), • CSS est de plus en plus verbeux (prefix...), • CSS devrait à l’avenir être bien plus orienté interaction, mais ce n’est pas prêt de voir le jour...lundi 16 juillet 12 4
  5. 5. Principaux acteurs • LESS : compilé en js coté client via une lib coté serveur en node ou via rhino, que du js :) • SASS : en ruby via la gem ‘sass’ • COMPASS, Surcouche de SASS En ruby également via la gem ‘compass’ Info : ‘compass’ encapsule déjà la gem ‘sass’lundi 16 juillet 12 5
  6. 6. Travailler Au quotidien • LESS : LESS app pour mac, gratuit simpless window et mac, gratuit • SASS : pas d’installer • COMPASS : Compass.app pour mac windows et linux, 10$ SCOUT pour mac et windows, gratuitlundi 16 juillet 12 6
  7. 7. Ou bien... • en ligne de commande Gratuit, compatible, et très facile à mettre en place :)lundi 16 juillet 12 7
  8. 8. UFC que choisir ? Choix Cornelien, Ou pas...lundi 16 juillet 12 8
  9. 9. Pourquoi Compass ? • Sass offre nativement plus de possibilités que Less (@extend, debug...) • Compass est modulaire : ‘reusable paterns’ Téléchargement, gestion et création de modules... • La documentation Compass est très (trop ?) riche • Compass semble gagner le bras de fer de la communautélundi 16 juillet 12 9
  10. 10. Installation • Ruby Via RVM (ruby version manager) pour mac et linux Via Ruby installer sous windows • On lance : $ sudo gem install compasslundi 16 juillet 12 10
  11. 11. Commande ‘create’ Permet de créer un projet Compass. Ciblez un dossier, puis lancez la commande create $ cd path_to/project/build_folder $ compass create nom_compass_folderlundi 16 juillet 12 11
  12. 12. Parlons Organisation /project_folder/ |-- .git |-- Ressources |-- specs/ |-- .../ |-- builds/ |-- compass/ |-- coffee/ |-- .../ |-- www/ |-- css/ |-- .../lundi 16 juillet 12 12
  13. 13. Configurer Compass Ouvrons le fichier config.rblundi 16 juillet 12 13
  14. 14. Commande ‘watch’ Permet convertir automatiquement des fichiers détectés comme modifiés. $ cd path_to/project/build_folder/compass_folder/ $ compass watchlundi 16 juillet 12 14
  15. 15. Enfin, le vif du sujet ! Quelques exempleslundi 16 juillet 12 15
  16. 16. Les commentaires Commentaires en ligne disponible. // Ceci est une révolutionlundi 16 juillet 12 16
  17. 17. Validation syntaxique Avec output à l’intérieur du fichier htmllundi 16 juillet 12 17
  18. 18. Inclusion via @import modules Compass @import "compass/reset"; fichiers personnels @import "lib/_variables"; Préfixer par ‘_’, le fichier sera ignoré lors de la transformationlundi 16 juillet 12 18
  19. 19. Variables via $ Création $red : #F00; Référence background-color : $red;lundi 16 juillet 12 19
  20. 20. fonctions Création @function em($target, $context: $basefont) { @return ($target / $context) * 1em; } Calcul la taille en em, sur une base de pixels.lundi 16 juillet 12 20
  21. 21. fonctions Référence /* base 16, donc 14/16 = 0.875 pour 14px en base*/ body{ font-size: 87.5%; } h1{ font-size: em(22); }lundi 16 juillet 12 21
  22. 22. mixin Création // border radius @mixin set_radius($size:5px, $name:border-radius){ // firefox -moz-#{$name}: $size; // Safari, Chrome -webkit-#{$name}: $size; // CSS3 border-#{$name}: $size; }lundi 16 juillet 12 22
  23. 23. mixin Référence via @include button{ @include set_radius(5px); }lundi 16 juillet 12 23
  24. 24. extend modules Compass .blackAndWhite{ border: solid 1px #000; background-color: #fff; } fichiers personnels button{ @extend .blackAndWhite; }lundi 16 juillet 12 24
  25. 25. Structures de contrôle Comme partout ailleurs, sauf en CSS natiflundi 16 juillet 12 25
  26. 26. Sources et liens • Compass, liste des modules • Sass Referencelundi 16 juillet 12 26

×