Un jour, une gem

06/01/2012

Vendredi c'est Compass

gem install compass

Compass, la suite logique de SASS

Compass est un outil qui reprend SASS et qui permet d’appliquer une logique de développement au Webdesign.

Par exemple en ajoutant la ligne suivante dans votre fichier .sass, vous importerez un reset css. Tout simplement.

@import "compass/reset"

Compass comprend tout un panel d’outils pour styler les éléments fastidieux habituellement, par exemple les tableaux.

Tout d’abord, on commence par créer un nouveau projet Compass :

compass create test —syntax sass

Le HTML

<div class='example'>
  <table cellspacing='0'>
    <thead>
      <tr class='odd'>
        <th>Compass</th>
        <th>c'est</th>
        <th>super</th>
        <th>cool !</th>
      </tr>
    </thead>
    <tbody>
      <tr class='even'>
        <th>Des fruits</th>
        <td class='numeric'>Banane</td>
        <td class='numeric'>Pomme</td>
        <td class='numeric'>Fraise</td>
      </tr>
      <tr class='odd'>
        <th>D'autres fruits</th>
        <td class='numeric'>Framboise</td>
        <td class='numeric'>Poire</td>
        <td class='numeric'>Cerise</td>
      </tr>
    </tbody>
  </table>
</div>

Le SASS 

@import "compass/utilities/tables" 
 .example
   table 
     $table-color: #C8A37C 
     +table-scaffolding 
     +inner-table-borders(1px, darken($table-color, 40%)) 
     +outer-table-borders(2px) 
     +alternating-rows-and-columns($table-color, adjust-hue($table-color, -20deg),#131313)

La CSS générée fait plus de 150 lignes, donc je ne la copierai pas ici ;)

Facile non ? En quelques lignes j’ai une solution pour styler un tableau, et il existe bien d’autres outils pré-intégrés à Compass.

Comme pour SASS, pour que le miracle survienne, il faut se placer dans le répertoire de votre projet Compass ou de votre projet Rails et taper la commande suivante :

compass watch

Compass offre une multitude de possibilités. On peut grâce à Compass exploiter facilement les frameworks 960 grid ou HTML5 Boilerplate pour ses projets.

Quelques liens utiles :