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
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