Your SlideShare is downloading. ×
0
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Sass et compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sass et compass

560

Published on

les bases de l'intégration sass et compass

les bases de l'intégration sass et compass

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
560
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Compass Et autres extensions ou «préprocesseurs CSSlundi 16 juillet 12 1
  • 2. Convention d’écriture Texte Lien Code / $ Command Remarquelundi 16 juillet 12 2
  • 3. Ce n’est pas : Une amélioration du support de CSS dans nos navigateurslundi 16 juillet 12 3
  • 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. 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. 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. Ou bien... • en ligne de commande Gratuit, compatible, et très 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 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. 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 ‘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. Parlons Organisation /project_folder/ |-- .git |-- Ressources |-- specs/ |-- .../ |-- builds/ |-- compass/ |-- coffee/ |-- .../ |-- www/ |-- css/ |-- .../lundi 16 juillet 12 12
  • 13. Configurer Compass Ouvrons le fichier config.rblundi 16 juillet 12 13
  • 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. Enfin, le vif du sujet ! Quelques exempleslundi 16 juillet 12 15
  • 16. Les commentaires Commentaires en ligne disponible. // Ceci est une révolutionlundi 16 juillet 12 16
  • 17. Validation syntaxique Avec output à l’intérieur du fichier htmllundi 16 juillet 12 17
  • 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. Variables via $ Création $red : #F00; Référence background-color : $red;lundi 16 juillet 12 19
  • 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. 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. 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. mixin Référence via @include button{ @include set_radius(5px); }lundi 16 juillet 12 23
  • 24. extend modules Compass .blackAndWhite{ border: solid 1px #000; background-color: #fff; } fichiers personnels button{ @extend .blackAndWhite; }lundi 16 juillet 12 24
  • 25. Structures de contrôle Comme partout ailleurs, sauf en CSS natiflundi 16 juillet 12 25
  • 26. Sources et liens • Compass, liste des modules • Sass Referencelundi 16 juillet 12 26

×