Aujourd’hui nous allons explorer les possibilités du framework Compass. C’est un outil puissant pour développer et intégrer de simples sites vitrine mais aussi et surtout pour des applications plus avancées où l’on cherchera de grandes facilités de relecture et de modification.
Afin de bien comprendre l’utilité des ces outils, attardons-nous un peu sur leurs fonctionnalités.
Sass est un langage de template : il nous permet d’utiliser une syntaxe différente, des fonctions, des variables.. le tout compilé en un fichier CSS propre et lisible (selon vos besoins).
Nous pourrions le comparer en terme de fonctionnalités à Less et d’autant plus pour la syntaxe à Stylus (qui est lui-même encore plus épuré que Sass).
Compass quant à lui est un framework pour optimiser l’écriture de vos feuilles de styles. Il vous donne des éléments que vous trouverez dans la plupart de vos intégrations.
Oubliés les accolades et les point-virgules, Sass s’en débarrasse. Il nous suffit de passer à la ligne à chaque nouvelle propriété.
Comme avec Ruby ou encore CoffeeScript nous avons la possibilité de créer des scopes (champs d’application) grâce à l’indentation. Ces scopes nous permettront de créer facilement des suites logiques de sélecteurs du type :
body
background: #000
color: #fff
// Je sélectionne chaque header
header
background: #fff
color: #000
// Je selectionne le header situé juste sous le niveau de body
& > header
background: #fff
color: #000
Ce genre d’imbrication peut donner une impression de complexité à la lecture mais devient vite très sympathique lorsqu’il s’agit de préciser vos styles.
Sûrement l’outil le plus précieux apporté par les langages de template, et spécialement par Sass : les mixins. Comme des fonctions, les mixins sont nommés, peuvent utiliser des arguments et renvoient les données que nous lui demandons. Nous pouvons les écrire de la façon suivante :
@mixin button($color, $height)
background: $color
height: $height
line-height: $height
font-size: ($height /2)
Nous pouvons aussi utiliser des fonctions, qui s’utilisent différemment et peuvent être associées aux mixins.
@function black($opacity)
@return rgba(0,0,0,$opacity)
@mixin link($color)
color: $color
text-shadow: 0 1px 1px black(0.3)
a
@include link(red)
Une fois ces quelques bases acquises, on prend vite l’habitude de ne jamais réécrire des règles identiques. Votre feuille de style s’en trouvera beaucoup plus légère, lisible et maintenable.
J’ai ici utilisé les termes $color et $opacity : ce sont des variables. Sass les reconnaît grâce au “$” placé devant. Nous pouvons les passer en arguments, comme dans cet exemple, ou simplement les définir afin de les réutiliser plus tard.
$link-color: red
$font-size: 16px
a
color: $link-color
font-size: $font-size
&:hover
color: lighten($link-color, 10)
Dans un projet ou chaque modification pourrait donner lieu à plusieurs changements, nous n’avons plus qu’à modifier la variable une seule fois.
J’ai ici utilisé la fonction lighten() qui me permet d’ajouter du blanc à la couleur originale contenue dans la variable $link-color. Un certain nombre de fonctions très utiles sont déjà présentes avec Sass et sont appelées helpers.
Compass est donc un ensemble de propriétés, de celles que l’on doit écrire plus de 5, 10 ou 100 fois dans nos feuilles de style. Voyons l’une des plus utiles.
L’apparition de CSS3 a créé dans nos fichiers CSS de longues et rébarbatives suite de propriétés du type :
a {
-webkit-transition: -webkit-box-shadow 2s;
-moz-transition: -moz-box-shadow 2s;
-o-transition: box-shadow 2s;
-ms-transition: box-shadow 2s;
transition: box-shadow 2s;
}
Grâce à Compass, nous pourrons écrire tout simplement :
a
+transition(box-shadow 2s)
Notez que je n’ai pas utilisé @include pour ajouter ce mixin transition. Le “+” est un raccourci, il a la même fonction mais sera plus court à écrire et plus rapide à lire (mais moins explicite).
Comme prefixr nous aurons accès à la plupart des propriétés et celle-ci seront complétées en fonction des besoins des différents navigateurs.
L’utilisation de nouveaux outils nous lance généralement dans l’inconnu. Même si Compass est ici pour nous simplifier la tâche, les changements qu’il apporte peuvent embrouiller les moins téméraires, voici une astuce pour coder court mais coder mieux.
Avec toutes ces fonctionnalités ajoutés par Compass et Sass, nous pourrions organiser d’une façon différente nos feuilles de styles.
Puisque le fichier est compilé, nous aurions tort de garder un fichier de plusieurs centaines (voire milliers) de lignes. Nous pouvons donc séparer nos styles comme bon nous semble, l’un pour telle partie de l’application (header, footer…) ou l’autre exclusivement pour définir les styles de typographie.
Si nous définissons différentes variables à réutiliser dans nos feuilles de style, autant le faire une fois pour toutes.
Nous pouvons créer une fichier base.sass qui contiendra les valeurs par défaut de nos mixins, la couleur de chacun de nos liens, la largeur par défaut d’un formulaire…
Nous l’importerons ensuite avec les autres fichiers .sass qui après compilation formeront un fichier CSS complet.
@import "compass";
@import "base";
@import "application";
@import "gallery";
Il existe bien sûr beaucoup de bonnes habitudes à prendre avec Compass, je vous invite à en savoir plus sur leur site. Plus vous utiliserez les outils proposés par Sass et Compass, plus vos feuilles de style seront épurées et maintenables, et c’est ce que nous recherchons en intégrant nos applications.
Cet article n’est évidemment pas une liste exhaustive des possibilités de Compass et Sass. Je vous invite donc à lire ce très bon article de Sacha Greif, Useful Sass Mixins ou encore cet article de nettuts qui s’attardera un peu plus sur la mise en place d’un projet avec Compass.
L’équipe Synbioz. Libres d’être ensemble.