Table des matières : [Masquer]
- 1 Sommaire
- 2
- 3 1. Présentation
- 4
- 5 2. Principe de base
- 6
- 7 3. Installation sous VSCode
- 8
- 9 4. Utilisation
- 10
- 11 5. Aperçu avant et après compilation
- 12
- 13 6. Mise en œuvre : Écriture imbriquée et non imbriquée
- 14
- 15 7. Utilisation des variables en SCSS
- 16
- 17 8. Utilisation des mixins en SCSS
- 18
- 19 9. Création de composants et feuilles partielles
- 20
- 21 10. Conclusion
Sommaire
- Présentation
- Principe de base
- Installation sous VSCode
- Utilisation
- Aperçu avant et après compilation
- Mise en œuvre : écriture imbriquée et non imbriquée
- Utilisation des variables en SCSS
- Utilisation des mixins en SCSS
- Création de composants et utilisation des feuilles partielles
- 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 ?
- Gagner du temps avec une écriture concise.
- Réutiliser du code grâce à des composants modulaires.
- 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 :
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 :
Installez l’extension Live Sass Compiler dans VSCode.
Créez un fichier Sass, par exemple
style.scss
.
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 :
Créez un fichier HTML (index.html) :
html
<link rel="stylesheet" href="./style.css">
Créez un fichier
style.scss
pour vos styles.
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 :
Simplifient les modifications globales (changement de couleurs, polices, etc.).
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 :
Favorise la réutilisation du code.
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 !