Sass & Compass, l’arme CSS3 qui simplifie vos intégrations

Le 15 juin dernier, pendant Web Event à Lyon, Mehdi Kabab alias @piouPiouM animait une conférence sur le framework CSS Compass. En seulement 20 minutes, il a su nous donner envie d’utiliser cet outil. Avec quelques amis, nous avons donc consacré notre weekend à sa découverte. L’objectif de cet article est double : vous expliquer en quoi consiste un framework CSS et vous faire envie en vous montrant comment vous allez gagner du temps sur vos intégrations.

Sass & Compass, l'arme CSS3 qui simplifie vos intégrations

1. C’est quoi un framework CSS et à quoi ça sert

Un framework est un ensemble de fonctions prédéfinies qui vous permet de gagner du temps à l’utilisation. Il existe deux principales extensions de CSS3 Less et Sass. Ces extensions permettent de travailler sur des CSS dynamiques. Vous allez pouvoir utiliser des variables, définir des mixins (classes abstraites), créer facilement vos sprites etc… Je ne parlerai que de Sass/Compass dans la suite de l’article.

Compass est une surcouche de Sass. C’est une application écrite en Ruby qui s’installe facilement sur votre ordinateur et qui va jouer le rôle d’un préprocesseur. Lorsque vous créez votre projet « compass », vous obtenez un dossier /sass contenant les sources de vos fichiers et un dossier /css contenant les fichiers compilés. Pendant vos développements, les fichiers sont automatiquement compilés donc pas besoin de s’en occuper. Lorsque vous passez en production, vous allez pouvoir compiler avec une ligne de commande et là vos CSS sont minifiés.

J’ai constaté plusieurs intérêts à utiliser ce framework:

  • Vous pouvez mieux structurer vos fichiers : au lieu de créer des parties dans votre fichier entre commentaires vous pouvez bien séparer vos fichiers, _header.scss, _footer.scss, _home.scss. Ils seront tous regrouper en un seul donc moins d’appels HTTP
  • Votre fichier principal est beaucoup plus concis
  • La compilation minifie les CSS ce qui existait déjà mais pratique de le retrouver automatiquement
  • La maintenance est donc simplifiée
  • Gain de temps énorme sur certaines modifications.Vous pouvez définir trois couleurs principales en début de fichier et tout gérer avec ces variables.
  • Une meilleure interopérabilité entre les différents navigateurs

2. Du concret

2.1 Mettre des variables dans vos CSS et exécuter des calculs

Qui n’a jamais rêvé de pouvoir utiliser des variables dans ces CSS. C’est maintenant possible.

[sourcecode language= »CSS »]
$main_color : #E7F0BD;
$menu_left : 20%;
$menu_right : 15%;

.content {
background-color: $main_color;
width = 100 – ($menu_left + $menu_right ); //L’unité sera en %
}
[/sourcecode]

2.3 Définir vos propres mixins

Un mixin est comme une fonction. C’est un ensemble de règles que vous pouvez réutiliser. Compass en temps que framework propose un ensemble de mixins déjà définies par des spécialistes.

[sourcecode language= »CSS »]
@mixin micro-clearfix {
&:before, &:after { content: ""; display: table; }
&:after { clear: both; }
}
header {
@include micro-clearfix;
}
[/sourcecode]

2.4 Imbriquer vos règles

Pour faciliter la lecture et condenser les règles, vous pouvez les imbriquer.

[sourcecode language= »CSS »]
table {
width: 100%;
th {
font-size : 1.2em;
}
td {
text-align: center;
.pair { background-color : #fff; }
.impair { background-color : #ccc; }
a {
color : #e2e2e2;
&:hover { color : #a4a4a4} // le & reprend l’élément parent
}
}
}
[/sourcecode]

2.5 Héritage de classes

[sourcecode language= »CSS »]
.flash {
@include border-radius(15px);
background: #fdd;
}

.flashError {
@extend .flash;
background: red;
}
[/sourcecode]

2.6 Générer vos sprites

La cerise sur le gâteau. Si comme moi, vous n’êtes pas spécialiste de Photoshop, vous devez galérer pour générer vos sprites. Compass est capable de générer et d’optimiser l’image du sprite et de vous générer le code CSS associé.

Sass & Compass, l'arme CSS3 qui simplifie vos intégrations - Générer facilement vos sprites avec Compass

Pour l’exemple on va imaginer que nous avons un menu avec six icônes. On crée un dossier /menu. Ce nom sera utilisé dans le nom de l’image générée. On place toutes les icônes dedans de btn1 à btn6 et on l’appelle en seulement deux lignes de SCSS :

[sourcecode language= »CSS »]
@import "menu/*.png"; // on importe toutes les images
@include all-menu-sprites; // génère les class pour chaque icône (de .menu-btn1 à .menu-btn6 )
[/sourcecode]

On peut ensuite utiliser les classes automatiquement générées de .menu-btn1 à .menu-btn2. On ne s’occupe plus des dimensions et vous pouvez facilement rajouter des icônes dans le dossier et l’utiliser directement à partir de son nom.

Conclusion

Évidemment, il y a beaucoup d’autres mixins à découvrir mais avouez quand même que ce framework apporte une vraie valeur ajoutée aux intégrateurs. Si vous désirez migrer vos CSS, une excellente ressource http://pioupioum.fr/compass-sauvez-integrateur/

Pour ceux qui souhaitent en apprendre d’avantage, vous pouvez commander le livre Sass and Compass in Action en bénéficiant d’une remise de 37% avec le code SASSCOMP37 avec le lien http://www.manning.com/netherland/.

Alors convaincu ?

  • http://www.blog-nouvelles-technologies.fr Yohann Poiron

    Merci Sylvain de l’article ! Moi qui voulait me pencher rapidement dessus je crois que désormais je n’ai plus le choix ;)

  • http://twitter.com/Wonderfoule Marc Lafay

    Bonjour Sylvain, et merci. Je teste le couple sas/compass depuis qques jours. Je cherche un livre de référence. Déjà commandé « CSS maintenables » qui traite du sujet entre autres choses. Qui peut me faire un retour sur « Sass and Compass in Action » ?