SASS : c’est quoi ?

La définition du SASS

Tous les développeurs de sites Web utilisent le CSS pour intégrer le design d’un site. C’est un langage qui a bien fait ses preuves, mais qui est très rudimentaire et limité au niveau de ses fonctionnalités. C’est là qu’entre en jeu le SASS.

SASS est l’acronyme de Syntactically Awesome Style Sheet. C’est un préprocesseur qui ajoute des fonctionnalités à CSS. Il permet, entre autres, de mieux structurer et simplifier le code, d’éviter les répétitions et plus encore. Le code SASS doit être dans des fichiers ayant l’extension .scss. À l’aide d’un programme, les fichiers SASS sont compilés et convertis en CSS. Une fois compilé, tout le code est regroupé dans un seul fichier CSS et minifié.

Quelques fonctionnalités

Voici quelques fonctionnalités du SASS qui changeront votre vie si vous êtres développeur Web!

• L’imbrication
• Les variables
• Les extensions
• Les mixins
• Les importations
• Les opérateurs
• Les conditions

1 – L’imbrication

Un des problèmes majeurs de CSS c’est que tout le code se trouve au même niveau. Si par exemple vous avez une liste à puce (balise ul) à l’intérieur de votre balise body, elle sera au même niveau que votre balise body et vous devrez en plus la répéter. Voici l’exemple concret :

body{
   background-color:#000;
}
body ul{
   color:#fff;
}

Avec SASS ce problème est résolu! Effectivement, SASS permet d’encapsuler le code. Si un élément se trouve à l’intérieur d’un autre, il le sera également dans le code SASS et à un niveau inférieur. Voici le même exemple que celui ci-dessus, mais en version SASS:

body{
   background-color: #000;
   ul{
      color: #fff;
   }
}

Cette fonctionnalité permet d’alléger le code, de mieux l’organiser et augmente la rapidité des développeurs.

2 – Les variables

Un autre souci avec CSS c’est la répétition. Si par exemple vous avez une couleur accent sur votre site, cette couleur se répètera sans doute à plusieurs reprises dans votre code CSS. Si vous changez la couleur accent de votre image de marque et que vous voulez la changer partout sur votre site, vous devrez parcourir tous les fichiers et aller remplacer le code de couleur par le nouveau à chaque endroit où il est présent.

Cette tâche peut être très longue, mais grâce à SASS vous avez maintenant une solution! Plutôt que d’écrire le code de votre couleur, vous allez créer une variable qui contiendra le code de votre couleur. De cette façon, si vous avez besoin de remplacer la couleur, vous la remplacer seulement dans la variable et la couleur sera changée partout sur votre site où il y a cette variable. Merveilleux non? Voici un exemple :

$accent: #3aaa35;

body{
   .col{
      background-color: #fff;
      border: solid 2px $accent;
      h1{
         color: $accent;
      }
   }
}

3 – Les extensions

Afin d’alléger encore plus le code et d’éviter les répétitions, avec SASS il est possible de créer des blocs de propriétés et de les réutiliser à plusieurs endroits sans avoir besoin de les copier-coller. Vous écrivez le bloc de code une seule fois et ensuite l’insérez où vous voulez. Voici un exemple :

%center{
   margin:0 auto;
}

.logo{
   width:160px;
   @extend %center;
}
.slogan{
   width: 100px;
   @extend %center;
}

4 – Les mixins

Les mixins permet de créer des blocs de code que vous pouvez ensuite inclure dans d’autres règles. Vous allez sûrement me dire « Oui, mais c’est la même chose que les extension non?! ». Vous avez raison, mais à une différence près! Avec les mixins il est possible d’ajouter des variables en plus. L’ajout des variables n’est pas possible avec les extensions. Si par exemple sur votre site vous avez plusieurs blocs avec des coins arrondis, mais avec des angles différents, vous pouvez créer une mixin et mettre une variable pour le degré afin d’éviter de copier-coller votre code. Voici un exemple:

@mixin arrondi($degres) {
   border-radius: ($degres);
}

.col{
   @include arrondi(15px);
}
footer{
   @include arrondi(10px);
}

Dans cet exemple, l’élément ayant la class col aura les coins arrondis de 15 pixels tandis que le pied de page aura les coins arrondis de 10 pixel.

5 – Les importations

Avec SASS vous pouvez créer des fichiers et les importer dans d’autres fichiers. La plupart des développeurs vont placer le code de chaque section du site dans des fichiers différents. Cette technique est très utilisée afin d’éviter d’avoir un seul fichier avec des milliers de lignes de codes. De cette façon, il est plus facile de se retrouver. C’est là que l’importation SASS devient très pratique.

Lorsque vous créez un fichier qui sera importé dans un autre, vous devez ajouter une barre de soulignement dans le nom de votre fichier. Comme ceci par exemple: _header.scss. Lorsque que vous ajoutez une barre de soulignent, SASS comprend que c’est un fichier que vous ne voulez pas transformer en CSS. Lorsque SASS compile le code, plutôt que de transformer ces fichiers en CSS, il les importe dès le début.

Si vous avez ces fichiers : _header.scss, _services.scss, _articles.scss, _footer.scss, voici comment les importer :

@import 'header';
@import 'services';
@import 'articles';
@import 'footer';

6 – Les opérateurs

Avec SASS c’est possible d’effectuer des calculs. Lorsque nous parlons d’opérateurs en programmation, nous parlons des symboles qui permettent de faire des opérations mathématiques (+, –, *, /, %). Voici un exemple que nous pourrions avoir en SASS :

$police: Arial
$police2: Helvetica;
$police3: sans-serif;

body{
   font-family: $police + ', ' + $police2 + ', ' + $police3;
}

Dans l’exemple ci-dessus, nous utilisons l’opérateur + pour concaténer afin d’ajouter la virgule entre les polices de caractères.

7 – Les conditions

Tout comme la plupart des langages de programmation, avec SASS vous pouvez faire des conditions. Si par exemple vous avez des gabarits de différentes couleurs, vous pourriez appliquer une couleur de fond différente dépendamment du gabarit. Voici un exemple:

$gabarit: "";

@if ($gabarit == vert) {
   background-color: #3aaa35;
} 
@else if ($gabarit == mauve){
   background-color: #6a4a9e;
}
@else {
   background-color: #ee352b;
}

Dans cet exemple nous avons créé une variable gabarit qui est vide. Si le gabarit est égal à vert, la couleur d’arrière plan sera verte, sinon si le gabarit est égal à mauve, la couleur d’arrière plan sera mauve, sinon la couleur d’arrière plan sera rouge.

Pousser les possibilités de SASS encore plus loin

Vous connaissez maintenant les fonctionnalités principales de SASS, mais sachez que vous pouvez aller encore plus loin en utilisant les fonctions et les boucles. À ce stade, c’est vraiment de la programmation. Si vous avez des questions ou besoin d’aide, n’hésitez pas à nous contacter.