Sass (Syntactically Awesome StyleSheets) – Enrichir les fonctionnalités de CSS

Design, Développement, HTML et CSS

Sommaire

  1. Présentation
  2. Principe de base
  3. Installation sous VSCode
  4. Utilisation
  5. Aperçu avant et après compilation
  6. Mise en œuvre : écriture imbriquée et non imbriquée
  7. Utilisation des variables en SCSS
  8. Utilisation des mixins en SCSS
  9. Création de composants et utilisation des feuilles partielles
  10. Conclusion

1. Présentation

Sass (Syntactically Awesome StyleSheets) est un préprocesseur CSS qui enrichit les fonctionnalités de CSS standard. Il permet de :

  • Simplifier la gestion des feuilles de style pour les projets complexes.
  • Améliorer la modularité et la lisibilité du code.
  • Automatiser les tâches répétitives grâce à des outils comme les variables, mixins ou imbrications.

Pourquoi utiliser Sass ?

  1. Gagner du temps avec une écriture concise.
  2. Réutiliser du code grâce à des composants modulaires.
  3. Faciliter la maintenance et l’évolutivité des projets.

Comparaison avec CSS classique :

CSS classique Sass/SCSS
Styles simples Styles avancés et dynamiques
Pas de variables Utilisation de variables
Syntaxe répétitive Syntaxe imbriquée intuitive

2. Principe de base

Sass introduit des concepts avancés pour structurer et simplifier le code CSS.

Imbrication des règles CSS :

  • CSS classique : Les styles imbriqués nécessitent une syntaxe répétitive.
  • SCSS : Permet une structure logique et intuitive.

Exemple :

scss
body {
section {
display: flex;
justify-content: space-around;.rouge {
width: 200px;
height: 200px;
background-color: red;
}
}
}

CSS généré :

css
body section {
display: flex;
justify-content: space-around;
}
body section .rouge {
width: 200px;
height: 200px;
background-color: red;
}

3. Installation sous VSCode

Pourquoi un compilateur ? Les navigateurs ne lisent pas directement le code Sass. Un compilateur convertit les fichiers .scss ou .sass en .css.

Étapes d’installation :

  1. Installez l’extension Live Sass Compiler dans VSCode.
  2. Créez un fichier Sass, par exemple style.scss.
  3. Lancez le compilateur pour générer automatiquement un fichier CSS correspondant.

Astuce :

  • Ne téléchargez que les fichiers CSS sur le serveur.
  • Ajoutez le fichier SCSS au .gitignore si vous n’avez pas besoin de le partager.

4. Utilisation

Démarrage rapide :

  1. Créez un fichier HTML (index.html) :
    html
    <link rel="stylesheet" href="./style.css">
  2. Créez un fichier style.scss pour vos styles.
  3. Activez le plug-in Watch Sass dans VSCode pour compiler automatiquement les fichiers.

5. Aperçu avant et après compilation

Avant Compilation (style.scss) Après Compilation (style.css)
Inclut des fonctionnalités avancées (variables, mixins, imbrications) Génère du CSS standard lisible par le navigateur

Exemple SCSS :

scss

$primary-color: #3498db;

body {
background-color: $primary-color;
p {
color: darken($primary-color, 10%);
}
}

CSS généré :

css
body {
background-color: #3498db;
}
body p {
color: #2c81ba;
}

6. Mise en œuvre : Écriture imbriquée et non imbriquée

Écriture imbriquée :

scss
nav {
ul {
li {
a {
text-decoration: none;
}
}
}
}

CSS généré (non imbriqué) :

css
nav ul li a {
text-decoration: none;
}

7. Utilisation des variables en SCSS

Les variables stockent des valeurs réutilisables, rendant le code plus flexible.

Exemple :

  • Fichier _variables.scss :
    scss
    $primary-color: #f00020;
    $secondary-color: #000000;
  • Fichier style.scss :
    scss

    @import 'variables';

    body {
    background-color: $primary-color;
    color: $secondary-color;
    }

Avantages des variables :

  1. Simplifient les modifications globales (changement de couleurs, polices, etc.).
  2. Réduisent les erreurs de duplication.

8. Utilisation des mixins en SCSS

Les mixins sont des blocs de styles réutilisables acceptant des paramètres.

Exemple :

  • Fichier _mixins.scss :
    scss
    @mixin button-style($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
    padding: 10px 20px;
    border-radius: 5px;
    }
  • Fichier style.scss :
    scss

    @import 'mixins';

    button {
    @include button-style(#3498db, #fff);
    }

CSS généré :

css
button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}

9. Création de composants et feuilles partielles

Organisation modulaire :

  • Divisez votre code en fichiers partiels (préfixés par _).
  • Exemple d’arborescence :
    plaintext
    sass/
    ├── _variables.scss
    ├── _mixins.scss
    ├── _header.scss
    └── style.scss

Compilation des partiels :

  • Fichier style.scss :
    scss
    @import 'variables';
    @import 'mixins';
    @import 'header';

Avantages :

  1. Favorise la réutilisation du code.
  2. Simplifie la maintenance et les modifications futures.

10. Conclusion

Sass est un outil essentiel pour les développeurs web modernes. Il offre une flexibilité et une puissance qui transforment la gestion des feuilles de style en un processus efficace et structuré. Avec des fonctionnalités comme les variables, mixins, imbrications et fichiers partiels, Sass permet de :

  • Gagner du temps.
  • Réduire les erreurs.
  • Créer des projets maintenables et modulaires.

Adoptez Sass dans vos projets pour maximiser votre productivité et améliorer la qualité de votre code CSS !

Bases : Construire un projet Laravel

La création d’un projet Laravel efficace nécessite une approche bien structurée pour organiser les données et gérer les fonctionnalités. Voici un...

Tuto : Laravel Ecommerce

Laravel 11 et Voyager forment un duo puissant pour développer rapidement des applications e-commerce robustes et personnalisables. Pourquoi : -...

Bases : Construire un projet Laravel

La création d’un projet Laravel efficace nécessite une approche bien structurée pour organiser les données et gérer les fonctionnalités. Voici un...

Tuto : Laravel Ecommerce

Laravel 11 et Voyager forment un duo puissant pour développer rapidement des applications e-commerce robustes et personnalisables. Pourquoi : -...