Sass et compass

download Sass et compass

of 26

  • date post

    02-Jul-2015
  • Category

    Technology

  • view

    564
  • download

    4

Embed Size (px)

description

les bases de l'intégration sass et compass

Transcript of Sass et compass

  • 1. CompassEt autres extensions ou prprocesseurs CSSlundi 16 juillet 12 1

2. Convention dcriture TexteLienCode / $ Command Remarquelundi 16 juillet 122 3. Ce nest pas :Une amlioration du support de CSSdans nos navigateurslundi 16 juillet 123 4. Pourquoi tendre CSS ?CSS natif, plutt se pendre. CSS est plat (Troll inside :), CSS est de plus en plus verbeux (prex...), CSS devrait lavenir tre bien plus orient interaction, mais ce nest pas prt de voir le jour...lundi 16 juillet 12 4 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 dj la gem sasslundi 16 juillet 125 6. Travailler Au quotidien LESS : LESS app pour mac, gratuit simpless window et mac, gratuit SASS : pas dinstaller COMPASS : Compass.app pour mac windows et linux, 10$ SCOUT pour mac et windows, gratuitlundi 16 juillet 12 6 7. Ou bien... en ligne de commande Gratuit, compatible, et trs facile mettre en place :)lundi 16 juillet 12 7 8. UFC que choisir ? Choix Cornelien, Ou pas...lundi 16 juillet 12 8 9. Pourquoi Compass ? Sass offre nativement plus de possibilits que Less (@extend, debug...) Compass est modulaire : reusable paterns Tlchargement, gestion et cration de modules... La documentation Compass est trs (trop ?) riche Compass semble gagner le bras de fer de la communautlundi 16 juillet 12 9 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. Commande createPermet de crer un projet Compass.Ciblez un dossier, puis lancez lacommande create $ cd path_to/project/build_folder $ compass create nom_compass_folderlundi 16 juillet 1211 12. Parlons Organisation /project_folder/ |-- .git |-- Ressources |-- specs/ |-- .../ |-- builds/ |-- compass/ |-- coffee/ |-- .../ |-- www/ |-- css/ |-- .../lundi 16 juillet 12 12 13. Congurer CompassOuvrons le chier cong.rblundi 16 juillet 1213 14. Commande watchPermet convertir automatiquement deschiers dtects comme modis. $ cd path_to/project/build_folder/compass_folder/ $ compass watchlundi 16 juillet 1214 15. Enn, le vif du sujet !Quelques exempleslundi 16 juillet 12 15 16. Les commentaires Commentaires en ligne disponible. // Ceci est une rvolutionlundi 16 juillet 1216 17. Validation syntaxique Avec output lintrieur du chier htmllundi 16 juillet 12 17 18. Inclusionvia @import modules Compass@import "compass/reset"; chiers personnels@import "lib/_variables";Prxer par _, le chier sera ignor lors de la transformationlundi 16 juillet 1218 19. Variables via $ Cration$red : #F00; Rfrencebackground-color : $red;lundi 16 juillet 1219 20. fonctionsCration@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. fonctions Rfrence/* base 16, donc 14/16 = 0.875 pour 14px en base*/body{font-size: 87.5%;}h1{font-size: em(22);}lundi 16 juillet 1221 22. mixin Cration// border radius@mixin set_radius($size:5px, $name:border-radius){ // firefox-moz-#{$name}: $size;// Safari, Chrome-webkit-#{$name}: $size; // CSS3border-#{$name}: $size;}lundi 16 juillet 1222 23. mixin Rfrence via @includebutton{@include set_radius(5px);}lundi 16 juillet 12 23 24. extendmodules Compass.blackAndWhite{border: solid 1px #000;background-color: #fff;}chiers personnelsbutton{@extend .blackAndWhite;}lundi 16 juillet 1224 25. Structures de contrleComme partout ailleurs, sauf en CSS natiflundi 16 juillet 12 25 26. Sources et liens Compass, liste des modules Sass Referencelundi 16 juillet 1226