Bases de SASS
Cet article explique les bases de SASS.
Nous allons expliquer les fonctionnalités de base de SASS étape par étape et montrer comment les utiliser avec des exemples pratiques de code.
YouTube Video
Bases de SASS
SASS (Syntactically Awesome Stylesheets) est un langage de feuilles de style qui étend CSS. En utilisant SASS, vous pouvez profiter de fonctions avancées non disponibles en CSS, telles que les variables, l'imbrication, les mixins et l'héritage. Cela facilite grandement la gestion et la réutilisation des feuilles de style.
Qu'est-ce que SASS ?
SASS est un langage qui simplifie l’écriture du CSS tout en permettant un style plus flexible et puissant. SASS propose également la syntaxe SCSS (Sassy CSS), qui est similaire à la syntaxe CSS standard. Voici un exemple :.
Exemple SCSS
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}Exemple CSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}Configuration de SASS
Comment installer
Pour utiliser SASS, installez d'abord Node.js puis installez SASS avec la commande suivante :.
1npm install -g sassComment compiler
Pour compiler les fichiers SASS (.scss ou .sass) en CSS, utilisez la commande suivante :.
1sass input.scss output.cssVous pouvez également utiliser l’option watch pour surveiller les modifications des fichiers et réaliser une compilation en temps réel.
Variables
SASS permet d'utiliser des variables pour réutiliser des valeurs comme les couleurs et les tailles de police.
Exemple de code
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- Ce code utilise des variables SASS pour définir les couleurs et les polices, et les réutilise dans le sélecteur
bodyafin d’améliorer la cohérence et la maintenabilité.
Résultat compilé
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}Imbrication
SASS améliore la lisibilité du code en permettant d’imbriquer les sélecteurs CSS.
Exemple de code
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- Ce code utilise une hiérarchie imbriquée pour clarifier visuellement la structure des styles.
Résultat compilé
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}Mixins
Les mixins permettent de réutiliser du code entre plusieurs sélecteurs.
Exemple de code
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- Ce code définit un style
border-radiusà l’aide de@mixinet le réutilise dansbuttonet.carden utilisant@include, permettant un stylage efficace sans duplication.
Résultat compilé
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}Héritage (@extend)
L’héritage permet d’appliquer des styles existants à d’autres sélecteurs.
Exemple de code
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- Ce code définit un sélecteur d’espace réservé
%button-styleet utilise@extendpour appliquer des styles communs àbuttonet.link-button, favorisant ainsi la réutilisation et la cohérence.
Résultat compilé
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}Conditions et boucles
SASS prend en charge les conditions et les boucles pour générer dynamiquement des styles.
Exemple de condition
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- Ce code utilise la fonction
ifde SASS pour changer la couleur de fond et du texte en fonction de la valeur de$theme, permettant une génération dynamique des styles grâce aux conditions.
Exemple de boucle
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- Ce code utilise une boucle
@forde SASS pour générer dynamiquement des classes de.column-1à.column-3.
Résultat compilé
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}Découpage et importation des fichiers
SASS permet de découper les fichiers et de les réutiliser à l’aide de @use ou @import.
Structure des fichiers
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}Résultat compilé
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}Résumé
Utiliser SASS simplifie l’écriture du CSS et améliore la réutilisabilité et la maintenabilité du code.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.