CSS les doigts dans le nez avec Compass

Compass est un framework qui permet de compiler des feuilles de style css en utilisant SCSS ou SASS. Cet outil permet d’intégrer des frameworks CSS tel que blueprint. Il met également à disposition une API pour une intégration HTML et CSS3 propre et productive. Nous allons voir comment SASS/SCSS permet combler les limites de CSS avec les variables, les fonctions, les mixins et l’héritage de selecteurs.

Les limites de CSS

A l’air des sites web dynamiques et des supports mobiles, le concept de feuille de style semble souffrir de quelques faiblesses. Effectivement les possibilités offertes par les innovations des dernières années tels que le HTML5, le CSS3 ne sont pas encore pris par tous les anciens navigateurs. Les contraintes que nous imposent les nouveaux supports tels les smartphones, tablettes ou écran 27pouces nous force à créer autant de feuilles de style pour un même document. Aujourd’hui un CSS cross browser est une utopie car il n’est possible ni créer des variables, ni de logique algorithmique. Il existe à la place de nombreux hacks qui sont susceptibles de ne plus marcher à la prochaine mise à jour de tel ou tel navigateur. Par nature le CSS parait un peu fouilli et il faut de la rigueur personnel pour bien classer les différentes déclarations. Du coup plus un projet va être complexe et plus sa feuille de style va être compliqué. On a tous en tête ce bon vieux style.css de 4000 lignes avec chaque nouvelle règle ajoutée à la fin du fichier.

Mise en place rapide d’un bootstrap avec Compass

Compass est développé en ruby, il faut donc s’assurer que la machine sur laquelle vous développez possède un interpréteur ruby d’installé.
Les sources seront par la suite compilés en simple CSS. Vous n’êtes donc pas obligé d’avoir un environnement ruby en production (sauf si vous faites du rails ;-) ).

Pour installer compass

    $ gem update --system
    $ gem install compass

Pour créer un nouveau projet, il suffit de lancer la commande suivante :

    $ compass create <myproject>

Il est possible de changer certains paramètres (tels que le noms des répertoires des différents assets) en ajoutant les options suivantes :

  • --using blueprint – Installe les librairies blueprint
  • --syntax sass – Utilise la SASS plutôt que SCSS
  • --sass-dir "src" – Remplace le nom du répertoire sass par src
  • --css-dir "stylesheets" – Remplace le nom du répertoire css par stylesheets
  • --javascripts-dir "js" – Remplace le nom du répertoire javascript par js
  • --images-dir "img" – Remplace le nom du répertoire des images par img

Dans le cas d’un projet Rails, il suffit d’ajouter compass-rails dans le GemFile, et de recréer le bundle de votre application.

Il existe un outil en ligne sur le site de compass qui permet de paramétrer la commande d’installation.

Pour compiler votre projet il suffit de faire un :

    $ compass compile

Il est également possible de compiler automatiquement à chaque édition de votre scss. Ce qui peut s’avérer très pratique en pleine intégration. Il ne vous reste plus qu’à laisser tourner cette commande dans une console, et l’édition du SCSS se fait de la même manière que celui du CSS.

    $ compass watch

Synthaxe d’écriture du SCSS ou du SASS

Les .sass et .scss ne sont que deux notations différentes pour le même moteur SASS. On peut le considérer comme une extension du CSS avec tout un tas de fonctionnalités.
La principale d’entre elle est sans aucun doute la possibilité d’imbriquer les règles sur plusieurs niveaux sans répéter le sélecteur conteneur. On utilisera les crochets et les point-virgules avec .scss et les tabulations avec .sass. On peut dire plus simplement que les adeptes de Django et Rails adorerons SASS, le reste du monde préférera SCSS.

#main {
    div.container {
        color: black;
        .important {
            border: solid black 1px ;
            color: red;
            font: {
                size: 14px;
                weight: bold;
           }
        }
    }
}
#main
    div.container
        color: black
        .important
            border: solid black 1px
            color: red
            font:
                size: 14px
                weight: bold
#main, div.container {
        color: black;
}
#main, div.container, .important {
        border: solid black 1px ;
        color: red;
        font-size: 14px;
        font-weight: bold;
}

Mixins, Include et Extends en SCSS

Un mixins est une portion de CSS que l’on peut appeler à plusieurs endroits. On peut lui passer des paramètres. L’API compass comprend de nombreux mixins mais il peut s’avérer pratique d’en créer d’autres :

@mixin box($width) {
    width: $width;
    border: 1px black solid;
    background-color: #EEE;
}

Include permet d’inclure le code CSS présent dans un mixin. Très pratique pour factoriser l’aspect de deux éléments qui ont des attributs en commun.
Par exemple le mixin link-colors fournis par compass, appelé de cette manière :

a {
     @include link-colors(blue, lightblue, red, purple, green) ;
}

permet de factoriser le code CSS suivant :

a {
    color: blue;
}
a:hover {
    color: lightblue;
}
a:active {
    color: red;
}
a:visited {
    color: purple;
}
a:focus {
    color: green;
}

Extends permet d’étendre le code CSS d’un autre element du DOM. On peut ainsi réduire le nombre de class attribuées à un élément et rendre plus lisible son DOM.

.important {
    font-size: 24px;
    font-weight: bold;
}
.very_important {
    @extends .important ;
    color: red; 
}
.important, .very_important  {
    font-size: 24px;
    font-weight: bold;
}
.very_important {
    color: red; 
}

Variables et fonctions en SCSS

Une grande faiblesse de CSS est de ne pas pouvoir créer de variables. SCSS comble ce manque et permet de les gérer. C’est un réel soulagement pour le refactoring.
On peut créer des variables pour tout : les tailles, les textes, les couleurs. Il suffit de préfixer par $. Les opérations de calcul + – * / peuvent être exécuter.

$main_size : 960px;
$little_box_size : $main_size / 3 ;
$color_title : #54912D ;
 
.container {
    width: $main_size;
    h1 { 
        color: $color_title ;
    }
    .sidebar {
        width: $little_box_size ;
        float: right;
    }
    .footer {
        .box {
            width: $little_box_size ;
        }
    }
}

On peut également créer ses propres fonctions. La notation est la suivante :

@function whiten($color, $percentage: 80%) {
    @return mix($color, white, $percentage);
}

Cette fonction retourne la valeur d’une couleur mélangé à un certain pourcentage de blanc.

Simplification et uniformisation du CSS3 avec Compass

Le CSS3 est une vrai révolution pour l’intégration html. Mais Il pose certains problèmes de compatibilité avec les anciens navigateurs. L’utilisation de préfix pour les fonctionnalités beta tel que -moz ou -webkit (pour ne citer que ceux des navigateurs les plus courant) peuvent compliquer une règle CSS.
Avec Compass, un appel au bon mixin suffit. La règle ne comporte qu’une seule ligne pour tous les navigateur, ce qui nous encourage à utiliser massivement le CSS3.
Par exemple pour les bordures arrondies on peut utiliser le mixin border-radius :

.box {
    @include border-radius(5px) ;
}

qui va générer le css suivant :

.box {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
}

Il existe des mixins pour les dégradés de couleurs, les ombres de texte, les transformations, les transitions et de nombreux autres effets que vous pourrez trouver dans la documentation de CSS3 de compass

Structurer votre projet avec les partials

En CSS, il est difficile de bien organiser ses déclarations dans une même feuille de style. Il est possible de les ranger dans différents blocs mais le nombre de lignes du fichier restera énorme. On peut également utiliser plusieurs fichiers mais ce n’est pas optimum pour le navigateur web du client.
Avec compass on peut utiliser les partials pour la déclaration de toutes les règles qui se regroupent.
Prenons l’exemple d’un site web classique avec un header, un footer et et section principale. On pourra créer un partial pour chacun d’eux et ainsi aisément compartimenter son code par fichier.

|-- screens.scss
`-- partials
    |-- _footer.scss
    |-- _header.scss
    `-- _main.scss

Pour importer les différents partials avec SCSS, il faut utiliser @import
Dans notre exemple dans le fichier screens.scss, @import "partials/header" importe le fichier _header.scss contenu dans le répertoire partials

@import "partials/header" ;
@import "partials/main" ;
@import "partials/footer" ;

Avantage de l’intégration de Blueprint dans Compass

Le gros problème de Blueprint et disons plutôt en général de tous les framework CSS, c’est que leur architecture en grille nous force à utiliser des classes de type .last ou autres .span-2, .prepend-1. Cette notation n’est absolument pas sémantique et elle lit très fortement le style au contenu. On peut rapidement se retrouver avec un structure de DOM ressemblant à ceci :

<div class="container">
  <div class="span-15 prepend-1 colborder">
    <div class="span-7 last">
      <h3>Title</h3>
      <p>Bla bla</p>
    </div>
  </div>
</div>

Personnellement je trouve qu’elle n’a pas grand chose à envier aux très archaïques structures en table (vous me pardonnerez de ne pas utiliser d’exemple pour l’illustrer)

Grace à la compilation de compass, désormais votre framework CSS est dissocié du DOM. Les classes spécifiques de blueprint (.span-1, .prepend-1,…) peuvent être appelé à l’aide de mixin directement dans le SCSS.

.main {
    @include span(15);
    @include prepend(1);
    @include colborder(1);
}
.article {
    @include span(7);
    @include last() ;
}
<div class="container">
  <div class="main">
    <div class="article">
      <h3>Title</h3>
      <p>Bla bla</p>
    </div>
  </div>
</div>

Le DOM devient clean, le CSS créé dynamiquement est plus que jamais maintenable facilement. Il n’y a plus aucune raison de passer de ce genre de framework.

Conclusion

Concrètement il y aucun avantage à ne pas utiliser ce genre de framework. L’apprentissage est vraiment rapide et les gains en qualité et en productivité seront significatifs. Même si l’on utilise pas toutes les fonctionnalités, compass n’est qu’une extension de CSS. C’est à dire que tous ce que vous faites avec CSS et parfaitement compatible en SCSS. Vous pouvez facilement l’intégrer à un projet existant et cela va forcément faciliter la lisibilité et la maintenance de votre feuille de style. Vous ne voulez pas installer ruby sur votre machine, vous n’êtes pas forcé d’utiliser compass, il existe d’autres compilateur CSS. Si c’est votre cas, LessCSS ressemble beaucoup et peut très bien vous convenir. De toutes façon après avoir goûté à ce genre d’outil il sera très difficile de s’en passer.

Articles similaires :

Mots-clefs : , , , ,

10 commentaires sur “CSS les doigts dans le nez avec Compass”

  1. Zadkiel dit :

    Bon article, très complet, qui présente bien les avantages d’un pre-processor css tel que SCSS.

    Une petite erreur toute fois, je pense, par rapport à la notation d’extends.
    Pour reprendre ton exemple:
    .important {
    font-size: 24px;
    font-weight: bold;
    }
    .very_important {
    @extends .important ;
    color: red;
    }

    Sera transformé en:
    .important, .very_important{
    font-size: 24px;
    font-weight: bold;
    }
    .very_important {
    color: red;
    }

    Et non en:
    .very_important {
    font-size: 24px;
    font-weight: bold;
    color: red;
    }

    Autre petite chose. Je suis d’accord avec toi sur le coté non-sémantique de blueprint :). Mais ton exemple avec l’utilisation de la class ‘leftbox’ ne l’est pas plus…Et si au final tu veux la mettre à droite ta box ?
    Peut-être plus quelque chose comme ‘article’ ?

    Sinon bravo, c’est une bonne ressource pour ceux qu’y veulent s’y mettre.

    • bugz dit :

      Merci pour tes remarques, je vais corriger mes approximations sur extends.
      En ce qui concerne leftbox, tu as raison ce n’est absolument pas sémantique et par conséquent l’exemple n’est pas probant dans ce cas de figure.

  2. emporeso dit :

    Bon article.
    Lorsque je compile mon projet j’ai un css avec plein de ligne de commentaire genre :
    /* line 5, ../sass/style.scss */
    body {
    color: rgba(204, 0, 204, 0.8);
    font-size: 14px;
    }

    /* line 10, ../sass/style.scss */
    header {
    width: 80%;
    height: 100px;
    background-color: cyan;
    }

    Savez-vous comment les supprimer ?

    Merci.

  3. [...] Nous allons considérer ici que vous savez installer et utiliser Sass et Compass. Si ce n’est pas le cas je vous invite à consulter mon tuto sur Compass [...]

  4. Hanks dit :

    Salut!
    Excellent article qui m’a motivé à essayer Compass.

    Je rencontre cependant un problème : lorsque je modifie base.scss pour passer le nombre de colonnes de 24 à 12, le changement n’est pas effectif.
    Par exemple, si je fais @import column(6), ma colonne fera 1/4 de mon container et non pas 1/2 comme ce serait le cas s’il y avait bien 12 colonnes…
    En revanche, le .showgrid montre une grille qui correspond à ma config.

    Comment faire pour que ma config soit effective sur les @include columns() & co?

    • bugz dit :

      C’est très bizarre ça devrait marcher comme sur des roulettes ! Il suffit de modifier le fichier base.scss
      Faudrait voir le projet pour voir ce que tu as fait…

  5. LokiiyLuxe dit :

    Bonjour,

    Je suis débutant mais le SCSS m’intéresse.
    Je comprend pas comment utiliser le code SCSS pour l’intégrer sur une page web

    Avec Dreamweaver par exemple il parait simple de faire une page html et d’y mettre de la css dedans et hop ont y met en ligne et ca marche …

    Pour SCSS je ne comprend pas le fonctionnement ….
    Pouvez vous expliquer version débutant ;)

    Cordialement

    • Brewal dit :

      Comme expliqué au début de l’article, il faut « compiler » tes fichiers .scss en fichier(s) .css. C’est ce fichier compilé qu’il te faut inclure dans le de ton document html.

  6. Brewal dit :

    Attention aux fautes :
    « Un mixins est une portion de CSS que l’on peut appelER à plusieurs endroits. On peut lui passER des paramètres. »

Laisser une réponse