10 min 1 septembre 2021
2 485

Arrêtez le CSS et passez au SASS !

Si vous avez déjà intégré des page web vous connaissez très certainement le CSS (du moins je l’espère pour vous), ce merveilleux language qui vous permet de rendre vos pages agréables à lire !

C’est en effet ce language que les navigateurs interprète pour styliser le contenu des sites web.

Mais alors pourquoi je vous demande d’arrêter le CSS ?

Entendons-nous bien sur une chose avant tout : ce que je vous recommande fortement ce n’est pas de ne plus utiliser de CSS mais plutôt de ne plus CODER en CSS.

En effet cette manière de styliser dans des fichiers .css est devenu tellement archaïque à mes yeux… Et je vous assure que vous serez du même avis que moi une fois que vous vous serez essayés à ce que je vais vous proposer à l’instant : le SASS

1/ Qu’est-ce-que le SASS ?

Le SASS (acronyme de Syntactically Awesome Style Sheets) est un language de script processeur qui vous permet d’écrire votre code différemment pour ensuite le compiler en CSS. Car comme je vous l’ai bien précisé en introduction : il ne s’agit pas d’un autre language de programmation interprété par les navigateurs web. Non ! Il s’agit toujours bel et bien de CSS à la sortie.

Le SASS est un language qui nous permet simplement de programmer différemment grâce à son script, le nom de ce script est le SassScript.

Ce language SASS dispose de 2 syntaxes :
• le SASS, syntaxe d’origine appelée également “syntaxe indentée”,
• et le SCSS, syntaxe apparue un peu plus tard et qui est la plus largement utilisée.

La syntaxe d’origine se caractérise par son indentation, son absence de point virgule “;” et ses sauts de lignes (pour séparer les blocs de règles). Voilà pourquoi nous l’appelons également syntaxe indentée. Elle peut faire penser à du des languages de programmation tel que Python pour ce qui connaissent.

La syntaxe la plus populaire est le SCSS qui reste similaire au CSS (on garde les accolades et les points virgules).

Voici un exemple de ces 2 syntaxes :

a, .link {
    color: $primary-color;
    text-decoration: none;
}

form {
    .btn-primary {
        background-color: $primary-color;
        color: white;
        border-radius: $default_radius;
        border: 1px solid;
    }
}
a, .link {
    color: $primary-color;
    text-decoration: none;
}

form {
    .btn-primary {
        background-color: $primary-color;
        color: white;
        border-radius: $default_radius;
        border: 1px solid;
    }
}

Préférant également la syntaxe SCSS je continuerai le cours avec celle-ci. ^^

2/ Mais quel intérêt de se mettre à ce language SASS ?

C’est peut-être la question que vous vous posez actuellement. Et bien car ce language vous offre des fonctionnalités inédites dans le domaine de la stylisation web !

Grâce au SASS vous pourrez : définir des variables, imbriquer votre code, créer des loops (boucles foreach, for et while), des conditions (if, else), des mixins, des fonctions et des héritages !

Pour les fans de PHP ou autres languages de programmation avec ce genre de fonctionnalités vous allez prendre votre pied je vous le garanti !

a/ Imbriquez votre code

Ce premier point peut à lui seul vous convertir au SASS : pouvoir imbriquer votre code ! En terme de lisibilité je trouve cela tellement plus agréable que de devoir répéter sans arrêts des lignes de sélecteurs… Regardez plutôt ! :

.post .post-container .post-content {
    box-shadow: 0 0 20px lightgrey;
}
.post .post-container .post-content .paragraph {
    margin: 20px auto;
}
.post .post-container .post-content .paragraph h2 {
    font-size: 24px;
}
.post .post-container .post-content .paragraph p {
    font-size: 16px;
}
.post .post-container .post-content .paragraph p a {
    text-decoration: none
}
.post .post-container .post-content {
    box-shadow: 0 0 20px lightgrey;
    .paragraph {
        margin: 20px auto;
        h2 {
            font-size: 24px;
        }
        p {
            font-size: 16px;
            a {
                text-decoration: none
            }
        }
    }
}

Ça respire quand même un peu plus non ?! 🙂

b/ Les variables

Alors je vois d’ici les petits malins qui vous me dire qu’il est déjà possible de définir des variables en CSS. Et oui c’est en effet le cas, pour ceux qui ne le sauraient pas déjà voici comment faire en CSS (à gauche). Et voici également comment se définissent des variables en SCSS (à droite)

:root {
    --primaryColor: lightblue;
    --borderRadius: 5px;
}
button {
    border-radius: var(--borderRadius);
    background-color: var(--primaryColor);
}
$primary-color: lightblue;
$border-radius: 5px;

button {
    border-radius: $primary-color;
    background-color: $border-radius;
}

Petite précision, pour être correct dans le jargon CSS, il s’agit ici de Custom Properties et non de variable.

À première vue il n’y a pas de réelle différence entre les 2, mais en réalité il y a plus de subtilités que vous ne le pensez. Si vous souhaitez en savoir plus je vous renvoie à mon article sur la différence entre les variables CSS et les variables SCSS.

Et en effet, si votre seul besoin est d’utiliser des variables pas de réelle nécessité à faire du SCSS. MAIS… sachez que ces variables vous seront très utiles pour les autres fonctionnalités ! 🙂

c/ Les boucles

Là on commence à tater à des choses sympas ! Les boucles ! En SASS vous pouvez créer des boucles (comment en PHP, Javascript, Python et autres…) et cela vous fera économiser beaucoup de temps !

Imaginons par exemple que vous souhaitez avoir des classes générique pour attribuer des positions à vos éléments, voici ce que cela donnerait en css puis en scss : 

.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.fixed {
    position: fixed;
}
.static {
    position: static;
}
.sticky {
    position: sticky;
}
$positions: ('absolute', 'relative', 'fixed', 'static', 'sticky');
@each $pos in $positions {
    .#{$pos} {
        position: $pos;
    }
}

C’est quand même beaucoup plus maintenable et agréable à coder non ? 🙂

d/ Les conditions

Vous pouvez également utiliser des conditions. Imaginons que j’ai un tableau avec des couleurs mais que je ne veux me servir que de 2 d’entre elles pour une règle particulière :

$primary-color: #FF5733;
$secondary-color: #990200;
$colors : (
    primary      : $primary-color,
    secondary    : $secondary-color,
    green       : 'green', 
    red         : 'red', 
    yellow      : 'yellow'
);
@each $key, $val in $colors {
    @if $key = 'primary' or $key = 'secondary' {
        .btn-#{$key} {
            background-color: #{$val};
        }
    }
}

e/ Les mixins

Pour schématiser simplement les mixins pourraient être vu comme des variables contenant un bloc de règle de style. Cette mixin, une fois définie peut-être importée dans d’autres règles. Il est également possible de passer des arguments dans vos mixins afin de jouer avec vos variables :

@mixin title($fontSize) {
    font-weight: 600;
    font-size: $fontSize;
    text-decoration: underline;
    color: $primary-color;
}

.big-title {
    @include title(36px);
}

.medium-title {
    @include title(24px);
}

f/ Les functions

SASS vous propose déjà son lot de fonctions très utiles classées dans des Built-In Modules. Mais vous pouvez également créer vos propres fonctions ! Voici un exemple très simple pour additionner des valeurs :

@function sum($nbrs...) {
    $sum: 0;
    @each $nbr in $nbrs {
        $sum: $sum + $nbr;
    }
    @return $sum;
}

.micro {
      width: sum(50px, 30px, 100px);
}

g/ Les héritages

Comme je vous l’ai précisé le SASS vous permettra d’écrire moins de code. Avec les héritages vous pouvez transmettre directement le style d’un élément à ses enfants :

.btn {
    border-radius: 50px;
    padding: 8px 15px;
    color: black;
    background-color: none;
    &-primary {
        @extend .btn;
        background-color: $primary-color;
        color: white;
    }
}

Ici la class .btn-primary hérite des règles de la classe .btn

Info utile le & avant le nom de la classe signifie “ajoute au nom de la classe courante”. Donc dans notre exemple la classe courante dans notre indentation est btn, auquel on ajoute -primary, ce qui nous donne btn-primary.

Voilà ! Il y a évidemment beaucoup d’autres choses à apprendre et à utiliser avec le SASS mais je tenais à vous en faire une présentation simplifiée afin d’attiser votre curiosité ! 🙂

Si vous souhaitez approfondir tout cela je vous conseille de vous rendre sur la doc officielle de SASS.