CompassEt autres extensions ou «préprocesseurs CSS
1lundi 16 juillet 12
Convention d’écriture
Texte
Lien
Remarque
Code / $ Command
2lundi 16 juillet 12
Une amélioration du support de CSS dans nos navigateurs
Ce n’est pas :
3lundi 16 juillet 12
CSS natif, plutôt se pendre.
Pourquoi étendre CSS ?
• 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...
4lundi 16 juillet 12
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’
5lundi 16 juillet 12
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
6lundi 16 juillet 12
Ou bien...
• en ligne de commande
Gratuit, compatible, et très facile à mettre en place :)
7lundi 16 juillet 12
UFC que choisir ?Choix Cornelien, Ou pas...
8lundi 16 juillet 12
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é
9lundi 16 juillet 12
Installation
• Ruby
Via RVM (ruby version manager) pour mac et linux
Via Ruby installer sous windows
• On lance :
$ sudo gem install compass
10lundi 16 juillet 12
Permet de créer un projet Compass.
Ciblez un dossier, puis lancez la commande create
Commande ‘create’
$ cd path_to/project/build_folder
$ compass create nom_compass_folder
11lundi 16 juillet 12
Parlons Organisation/project_folder/
|-- .git
|-- Ressources
|-- specs/
|-- .../
|-- builds/
|-- compass/
|-- coffee/
|-- .../
|-- www/
|-- css/
|-- .../
12lundi 16 juillet 12
Ouvrons le fichier config.rb
Configurer Compass
13lundi 16 juillet 12
Permet convertir automatiquement des fichiers détectés comme modifiés.
Commande ‘watch’
$ cd path_to/project/build_folder/compass_folder/
$ compass watch
14lundi 16 juillet 12
Enfin, le vif du sujet !Quelques exemples
15lundi 16 juillet 12
Les commentairesCommentaires en ligne disponible.
// Ceci est une révolution
16lundi 16 juillet 12
Validation syntaxiqueAvec output à l’intérieur du fichier html
17lundi 16 juillet 12
Inclusionvia @import
@import "compass/reset";
modules Compass
fichiers personnels
@import "lib/_variables";
Préfixer par ‘_’, le fichier sera ignoré lors de la transformation
18lundi 16 juillet 12
Variablesvia $
$red : #F00;
Création
background-color : $red;
Référence
19lundi 16 juillet 12
fonctionsCréation
@function em($target, $context: $basefont) { @return ($target / $context) * 1em;}
Calcul la taille en em, sur une base de pixels.
20lundi 16 juillet 12
fonctions
/* base 16, donc 14/16 = 0.875 pour 14px en base*/
body{ font-size: 87.5%;}
h1{ font-size: em(22);}
Référence
21lundi 16 juillet 12
mixinCréation
// border radius @mixin set_radius($size:5px, $name:border-radius){ // firefox -moz-#{$name}: $size; // Safari, Chrome -webkit-#{$name}: $size; // CSS3 border-#{$name}: $size; }
22lundi 16 juillet 12
mixinRéférence via @include
button{ @include set_radius(5px); }
23lundi 16 juillet 12
extend
.blackAndWhite{ border: solid 1px #000; background-color: #fff;}
modules Compass
fichiers personnels
button{ @extend .blackAndWhite;}
24lundi 16 juillet 12
Structures de contrôleComme partout ailleurs, sauf en CSS natif
25lundi 16 juillet 12
Sources et liens
• Compass, liste des modules
• Sass Reference
26lundi 16 juillet 12