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 :