SASS c’est quoi ?

SASS (Syntactically Awesome Style Sheets) est un préprocesseur CSS qui permet d’écrire des feuilles de style de manière plus efficace et modulaire. Avec SASS, vous pouvez utiliser des fonctionnalités avancées telles que les variables, les mixins et les fonctions pour générer du code CSS plus rapidement et de manière plus cohérente. SASS permet également de structurer vos fichiers de style en modules réutilisables et de générer des styles de manière dynamique en fonction de variables et de conditions.

Bootsrtap c’est quoi ?

Bootstrap est le framework CSS le plus populaire actuellement. Il permet de créer rapidement des sites web jolis (les gouts et les couleurs… ). Pour cela il suffit d’inclure le lien vers le CDN dans votre site et de consulter la documentation pour créer en quelques minutes une première page avec un header et du contenu sur plusieurs colonnes, le tout responsive bien évidemment.

Au final on se retrouve rapidement avec du HTML ressemblant à :

<div class="container row">
    <div class="col-md-4 col-sm-2">Neque porro quisquam est qui dolorem</div>
    <div class="col-md-4 col-sm-6">Nemo quaeso miretur, si post exsudatos</div>
    <div class="col-md-4 col-sm-3 text-center">excipere unum pro universis</div>
</div>

Comme on peut le voir celui-ci contient du html et des classes spécifiques à Bootstrap décrivant explicitement le rendu. Personnellement je ne suis du tout adepte de cela. Normalement une page web se décompose en 3 parties :

• Le contenu : HTML
• Le style : CSS
• Le code : JavaScript

Bien sûr il y a une frontière entre ces 3 parties, mais celle-ci doit rester la plus mince possible. Dans le cas présent cette frontière entre le contenu et le style est perdue puisque les classes décrivent le résultat graphique attendu (exemple text-center). Ce type de classes peut être assimilé à du style inline factorisé. De manière générale, avoir plus de 2 ou 3 classes pour décrire un élément ou utiliser des noms décrivant le rendu est signe que la frontière est proche si elle n’est pas déjà franchie. Pour ma part je préfère avoir le html suivant :

<div class="container">
    <div class="left-sidebar">Neque porro quisquam est qui dolorem</div>
    <div class="main-content">Nemo quaeso miretur, si post exsudatos</div>
    <div class="widgets">excipere unum pro universis</div>
</div>

Ici il n’y a qu’une seule classe par élément. Cette classe décrit le contenu et non le rendu attendu. On a donc plus de sémantique que la version originale, mais on perd le style fourni par Bootstrap. Il faut donc définir le style pour chacune des classes dans un fichier CSS. C’est là que SASS intervient pour nous aider. SASS est un pré-processeur CSS (comme LESS ou Stylus). Il s’agit d’un langage proche du CSS apportant des fonctionnalités pratiques : variables, mixins, etc.

Note : Pour compiler un fichier SCSS dans Visual Studio vous pouvez utiliser l’extension WebCompiler de Mads Kristensen.

SASS + Bootsrtap ?

La version 3 de Bootstrap est développée en LESS et convertie automatiquement en CSS et en SASS. La version 4, toujours en beta, est développée directement en SASS. Pour obtenir les sources SASS, plusieurs solutions sont possibles :

• Le repo GitHub : https://github.com/twbs/bootstrap-sass
• Bower : bower install bootstrap-sass
• Nuget : Install-Package Twitter.Bootstrap.Sass

Une fois bootstrap sass récupéré, nous pouvons l’utiliser pour définir le style de nos éléments. Pour cela il faut créer un fichier sass pour notre site : site.scss. Ce fichier importe bootstrap afin de pouvoir profiter de tout ce que ce framework propose. Ensuite il nous suffit d’utiliser l’instruction @extend .class pour appliquer le style de bootstrap à nos classes. Cette instruction permet d’ajouter la règle que l’on définit à la règle initiale :

@import "_bootstrap.scss";
.container {
    @extend .row;
    .left-sidebar,
    .main-content,
    .widgets {
        @extend .col-md-4;
    }
    .left-sidebar {
        @extend .col-sm-2;
    }
    .main-content {
        @extend .col-sm-6;
    }
    .widgets {
        @extend .col-sm-3;
        @extend .text-center;
    }
}

Pour bien comprendre l’instruction @extend, voici le css généré pour @extend .text-center :

.text-center, // Sélecteur original (fourni par Bootstrap)
.container .widgets // Ajouté grâce à l'instruction @extend
{
    text-align: center; 
}

On voit que notre règle a bien été ajoutée à la règle initialement définie par Bootstrap.

L’utilisation de SASS permet bien d’autres choses. Il est par exemple possible de modifier les constantes de Boostrap (défini dans le fichier _variables.scss) en les définissant avant l’import de Bootstrap :

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;
@import "_bootstrap.scss";

On peut également utiliser les mixins utilisées par Bootstrap (définis dans le dossier mixins). Par exemple on peut définir un système de grille personnalisée :

.custom-grid {
    $grid-columns: 10;
    .item {
        @include make-row();
        .profile {
            @include make-sm-column(2);
            @include make-md-column(3);
        }
        .content {
            @include make-sm-column(8);
            @include make-md-column(7);
        }
    }
    $grid-columns: 12; /* Restore default */
}

<div class="custom-grid">
    <div class="item">
        <div class="profile">Profile</div>
        <div class="content">Un peu de texte</div>
    </div>
    <div class="item">
        <div class="profile">Profile</div>
        <div class="content">Un peu de texte</div>
    </div>
</div>

Conclusion

L’utilisation du pré-processeur SASS avec Bootstrap permet de conserver un html sémantique et non pollué par des classes spécifiques au framework. Cela le rend plus lisible et permet de réellement conserver la séparation entre le contenu et le style.