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