Sass et compass

855 vues

Publié le

les bases de l'intégration sass et compass

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

Aucun téléchargement
Vues
Nombre de vues
855
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×