[CSS] Préprocesseur SASS/LESS/Stylus

[Daethe]

           Qu’est-ce qu’un préprocesseur ?

En informatique, un préprocesseur est un programme qui procède à des transformations sur un code source, avant l'étape de traduction proprement dite (compilation ou interprétation). Les préprocesseurs sont des exemples typiques de langages spécialisés. Selon le niveau de leur analyse du texte source, on distingue des préprocesseurs lexicaux et des préprocesseurs syntaxiques.

 

           Lequel utilisé pour le CSS ?

 

Dans ce topic je vais vous présenter SASS qui est celui que j’utilise le plus. Néanmoins il en existe d’autre tel que LESS ou encore Stylus.

 

Pour SASS, voici une petite description:

           

SASS (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style ou encore un métalangage de feuilles de style en cascade (CSS). Pour celui-ci ils existent 2 syntaxes, une syntaxe nommée « syntaxe indentée » et une autre nommé « SCSS » qui est proche de CSS. Il peut être étoffé avec Compass (pratique pour les préfixes des différents navigateurs).

 

 

Pour les deux autres que je ne connais pas, je vous laisse vous documentez.

 

 

           Installation

Pour installer SASS vous allez avoir besoin de Ruby que l’on trouve pour windows à ce lien autrement pour Linux ou encore OS X vous pouvez utiliser le système de gestion des paquets que vous préférez. Une fois installé assurez-vous d’avoir l’exécutable au sein de votre variable d’environnement PATH puis exécuté au sein de l’invité de commande :

 

gem update –system
gem install compass

 

Et voilà on va pouvoir commencer un nouveau projet, en guise de démonstration on va réaliser une grille CSS sans notion responsive.

 

 

        Démonstration SASS

Pour commencer nous allons créer un dossier dans lequel nous allons ouvrir un invité de commande et exécuter ceci :

compass init
compass watch

Puis nous allons supprimer les fichiers ie.scss ainsi que print.scss, de même nous allons créer le fichier _grid.scss. Au sein du fichier screen.scss nous allons supprimer tout son contenu pour le remplacer par :

@import "compass";
* {@include box-sizing(border-box);}
body {margin: ; padding: ; font-family: sans-serif;}
@import "grid";

Explication pour ce bout de code :

-          @import signifie que nous allons utiliser un fichier annexe à celui que nous éditons, pour le fichier ‘compass’ rien n’est à créer puisque c’est un fichier de la librairie tandis que pour le fichier ‘grid’ vous aurez remarqué qu’il fait référence au fichier que nous avons créé peu de temps avant.

-          @include fais référence à une ‘fonction’ propre à compass (cela nous évite de préfixé les règles CSS)

 

Le plus gros du travail se situe au sein de _grid.scss , commençons par initialiser quelque variable pour cela rien de compliqué :

$columns : 12!default ;
$gutter : 20px!default ;

L’attribut !default appliqué sur les variables nous permet de pouvoir modifier la valeur de celle-ci avant l’import du fichier autrement cette variable prendra la valeur 12 par défaut. 

 

Par la suite nous allons créer une classe qui sera une classe réservé pour un héritage.

%grid {
   float: left;
   position: relative;
   min-height: 1px;
   padding:  $gutter * 0.5;
}

Et pour finir voici ce que nous allons aimer, voir même chérir (it’s a trap!): notre itération.

@for $i from 1 through $container {
   .grid-#{$i} {
       @extend %grid;
       width: $i / $container * 100%;
   }
}

Bon on commence avec du lourd, le nom de la variable qui va de 1 à 12 dans notre exemple. Rien de bien compliqué, si vous connaissez un peu tout type de langage on s’y retrouve puis viens #{$i}, celui-ci nous permet de faire un echo (php), un println (java), etc… Ensuite viens l’extension à la classe que nous avons créer précédemment puis un calcul tout bête que même ma petite cousine de primaire saurais faire :x

 

Je vais m’attarder un peu au niveau de l’héritage, avec celle-ci, ce qui va se passer c’est que tout les classes relative à notre grille tel que .grid-1, .grid-2 vont avoir la même position, le même padding, la même hauteur minimum de ce fait ce qu’il va se passer c’est que SASS va regrouper tout les noms de classes au sein de la même règle, pour être plus clair voici ce qui va se passer:

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
  float: left;
  position: relative;
  min-height: 1px;
  padding:  1px;
}

Si certains éléments méritent un peu plus de précision, je vous laisse m'en informer et je ferais ce qui doit être fait

 

PS: Merci @Gameuse Skitty pour avoir fait un relecture