les bases de l'intégration sass et compass

1. Compass
Et autres extensions ou «préprocesseurs CSS
lundi 16 juillet 12 1

2. Convention d’écriture
Texte
Lien
Code / $ Command
Remarque
lundi 16 juillet 12 2

3. Ce n’est pas :
Une amélioration du support de CSS
dans nos navigateurs
lundi 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, gratuit
lundi 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 compass
lundi 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_folder
lundi 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.rb
lundi 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 watch
lundi 16 juillet 12 14

15. Enfin, le vif du sujet !
Quelques exemples
lundi 16 juillet 12 15

16. Les commentaires
Commentaires en ligne disponible.
// Ceci est une révolution
lundi 16 juillet 12 16

17. Validation syntaxique
Avec output à l’intérieur du fichier html
lundi 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 transformation
lundi 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 natif
lundi 16 juillet 12 25

26. Sources et liens
• Compass, liste des modules
• Sass Reference
lundi 16 juillet 12 26