Go to Hackademy website

Découvrir le framework Compass

Victor Darras

Posté par Victor Darras dans les catégories design

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.

Le logo de Compass

Compass et Sass

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.

Sass

La syntaxe

Découvrez Sass

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.

Mixins et @include

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

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.

CSS3 prêt à l’ouvrage

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.

Quelques bons réflexes

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.

Poser les bases

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.

Articles connexes

Création d'un menu en accordéon avec CSS

04/06/2015

Bonjour à tous, l’article d’aujourd’hui , dans la lignée de celui concernant la barre de chargement en CSS portera sur la création d’un élément bien connu des intégrateurs, en particulier sur les...

Exporter des assets pour Android avec Sketch

17/04/2015

Bien le bonjour intrépides lecteurs, aujourd’hui je vais vous faire part d’un plugin pour Sketch (que je présente depuis quelques temps sur ce blog). Baptisé Sketch Android Assets, ce plugin vous...

Création d'une barre de chargement avec CSS

28/01/2015

Bonjour à tous, aujourd’hui je vais vous présenter une petite astuce pour mettre en place une barre de chargement avec un tooltip qui affichera de façon élégante où elle en est, le tout avec quelques...

Client, designer, développeur: un workflow qui fonctionne

12/03/2014

Arrivé depuis maintenant plus d’un an chez Synbioz, j’ai eu l’occasion de travailler sur plusieurs projets avec plusieurs développeurs. En tant que webdesigner et intégrateur j’ai la possibilité de...