La grille CSS vue et corrigée par Sass

Sass ça s’installe ?

Et bien oui ! Vous devez pour cela :

• un terminal ou console
• un peu de patience
• et beaucoup de café ;)

Tout d’abord, Sass a été écrit nativement en Ruby. C’est pour cela qu’il fallait faire une ligne de code comme ceci :

Mac :

Sudo gem install sass

Ps : Je vous rappelle qu’il n’a pas besoin d’installer Ruby, c’est natif sous Mac.

Pour Windows, Je vous conseille vivement ce tuto par la communauté francophone Ruby car oui Windows aime quand c’est compliqué :p

Cependant la compilation étant lente avec Ruby, un projet a vu le jour : LibSass. C’est la puissance de Sass couplé avec le langage C+ pour une compilation digne d’une formule 1 !

Pour ma part, J’utilise Sass avec un task runner nommé Gulp pour conserver cette rapidité ;) J’y reviendrai dans un prochain billet.

L’essentiel DRY

“Write Less, do more” prend tout son sens ici. En gros, DRY veut dire “Don’t Repeat Yourself” afin d’être dans une logique de productivité égale à la qualité. Oui, il faut toujours penser que notre grille peut être reprise par un autre développeur et si vous ne le faites pas. C’est la catastrophe à coup sûr !

De plus, en terme SEO, pensez toujours a votre « nommage » de classe pour une sémantique claire. Oui car le seul le reproche que j’ai à faire des frameworks comme Bootstrap. C’est qu’il n’y a pas de séparation entre le HTML et le CSS. C’est peut être utile mais ce n’est pas top tout de même !

Rassurez vous, Bootstrap ou encore Foundation ont été écrits en Sass donc par le biais de mixins vous pouvez faire votre popote.

Ps : Pour ce qui est du vocabulaire propre à Sass comme les mixins, fonctions. Ce lien est pour vous. C’est gratuit ;)

Allez c’est parti !

Tout d’abord, vous allez installer Compass qui est une extension intéressante pour le préfixage des CSS propre à Sass comme ceci :

sudo gem install compass

Puis pour vous familiariser avec Compass vous allez créer un projet Compass :

compass create ma-grille

Pour cela, Compass va automatiquement générer un dossier stylesheet, sass avec un config.rb Je vous rassure config.rb est l’endroit ou vous allez dire à Compass où sont les fichiers à compiler avec la possibilité de greffer d’autres extensions. Ceci est une autre histoire ;)

Dans le cadre du DRY, nous allons couper notre feuille de style en partials pour avoir un code beaucoup plus maintenable comme ceci :

Ps : Le underscore permet de dire à Sass de ne pas compiler les partials.

Grace à cela, nous pouvons importer notre contenu dans la feuille Sass qui sera alors compilée.

Pour la grille, l’utilisation de variables ou de boucles sont nécessaires. Ah oui pourquoi faire compliqué quand on peut faire simple ?

/* On définit sa grille */
$columns : 12;

/* Gutters signifie Gouttière en anglais */
$gutters : 30px;

%box {

/* le comportement de vos boites */
float:left;

background: red;

padding: $gutters;

}

@for $i from 1 through $columns {

box-#{$i} {

@extend %box;

width : $i / $columns * 100%;

}

}

Ce qui donnera :

/* Votre grille générée */
box-1, box-2, box-3, box-4, box-5, box-6, box-7, box-8, box-9, box-10, box-11, box-12 {
  float: left;
  background: red;
  padding: 30px;
}

box-1 {
  width: 8.33333%;
}

box-2 {
  width: 16.66667%;
}

box-3 {
  width: 25%;
}

box-4 {
  width: 33.33333%;
}

box-5 {
  width: 41.66667%;
}

box-6 {
  width: 50%;
}

box-7 {
  width: 58.33333%;
}

box-8 {
  width: 66.66667%;
}

box-9 {
  width: 75%;
}

box-10 {
  width: 83.33333%;
}

box-11 {
  width: 91.66667%;
}

box-12 {
  width: 100%;
}

Vous devez aussi penser à l’aspect responsive de votre site. C’est à dire que votre site doit s’adapter à tous les types de terminaux. Pour cela nous développons sous Sass :

$columns: 12;

$mobile: “(max-width: 480px)”

@media #{$mobile} {

@for $i from 1 through $columns {

box-#{$i} {

width : 100%;

}

}

}

Ce qui donnera :

@media (max-width: 480px) {

/* Toutes vos boites auront une largeur de 100% en mobile */
box-1 {
width: 100%;
}

box-2 {
width: 100%;
}

box-3 {
width: 100%;
}

box-4 {
width: 100%;
}

box-5 {
width: 100%;
}

box-6 {
width: 100%;
}

box-7 {
width: 100%;
}

box-8 {
width: 100%;
}

box-9 {
width: 100%;
}

box-10 {
width: 100%;
}

box-11 {
width: 100%;
}

box-12 {
width: 100%;
}
}

Voila vous venez de créer avec Sass/Compass votre première petite grille perso pour vous éviter de rester dans le carcan “Tiens j’ai la flemme”. Cependant dans un prochain billet nous parlerons de l’intérêt de faire sa grille avec un framework CSS basé sous Sass ;)

Mon Avis

Pour ma part, Sass / Compass a changé la vision que j’avais sur CSS qui est un vieux langage. Cela vous permet d’accroître votre productivité avec la qualité au rendez vous. Ce n’est pas beau cela ?

Mais attention aux néophytes, ce langage nécessite un temps d’adaptation. Oui car je peux vous dire que cela peut être un vrai danger car vous pouvez du code généré qui ne sert à rien ! Relativisons un peu !

Si vous voulez d’autres exemples de boucles sur Sass ou d’autres techniques sous Sass, n’hésitez pas à m’en faire part en commentaire :)

Et vous, utilisez vous Sass comme préprocesseur ?

Laissez vos impressions sur notre blog !