SCSS (Sass)
La documentation SCSS explore des fonctionnalités clés qui permettent des feuilles de style CSS plus efficaces et maintenables, facilitant la création de designs flexibles et dynamiques.
Informations
Date de publication :
Date de modification :
Catégories : scss, css, sass
Auteur :
meezyr
SCSS (Sassy CSS) est une extension du langage CSS qui offre des fonctionnalités avancées et permet aux développeurs de créer des feuilles de style plus puissantes et maintenables. Cette documentation explore diverses fonctionnalités de SCSS, y compris la définition de styles réutilisables, l'utilisation de fonctions, l'extension d'éléments, la gestion des conditions, et bien plus encore. Cette documentation fournit un aperçu des principales fonctionnalités de SCSS. Pour des détails plus approfondis et des exemples supplémentaires, veuillez consulter la documentation officielle de Sass.
1. Mixin & Include
Utilisation : @mixin
Les mixins permettent de définir des styles réutilisables. Ils sont utiles pour éviter la duplication de code en regroupant des styles similaires dans un @mixin, puis en les incluant là où nécessaire.
Exemple :
@mixin button-style {
padding: 10px 20px;
background-color: #3498db;
color: #ffffff;
}
.button {
@include button-style;
}
Utilisation : @include
L'instruction @include est utilisée pour incorporer les styles d'un @mixin dans une règle CSS existante.
Exemple :
@mixin button-style {
// ...
}
.button {
@include button-style;
}
2. Fonctions
Utilisation : @function
Les fonctions SCSS permettent de définir des opérations réutilisables et de retourner des valeurs.
Exemple :
@function calculate-width($width) {
@return $width * 2;
}
.element {
width: calculate-width(100px);
}
3. Extension d'éléments
Utilisation : @extend
L'extension d'éléments permet à un sélecteur de prendre les propriétés d'un autre sélecteur.
Exemple :
.button {
// ...
}
.primary-button {
@extend .button;
background-color: #e74c3c;
}
4. Chargement de règles d'une autre feuille
Utilisation : @use
L'instruction @use permet de charger et d'importer des règles d'une autre feuille SCSS dans le fichier actuel.
Exemple :
@use 'variables';
5. Règles de conditions
Utilisation : @if, @else, @else if
Les règles de conditions permettent d'appliquer des styles en fonction de conditions spécifiques.
Exemple :
$color: red;
.element {
@if $color == red {
color: red;
} @else if $color == blue {
color: blue;
} @else {
color: black;
}
}
6. Parcourir des listes
Utilisation : @each
L'instruction @each permet de parcourir les éléments d'une liste et d'appliquer des styles en conséquence.
Exemple :
$colors: red, green, blue;
@each $color in $colors {
.#{$color}-element {
color: $color;
}
}
7. Boucles
Utilisation : @for
L'instruction @for permet de créer une boucle basée sur un nombre spécifié d'itérations.
Exemple :
@for $i from 1 through 3 {
.item-#{$i} {
width: 100px * $i;
}
}
Utilisation : @while
L'instruction @while permet de créer une boucle basée sur une condition spécifique.
Exemple :
$i: 1;
@while $i < 4 {
.item-#{$i} {
width: 100px * $i;
}
$i: $i + 1;
}
8. Déclaration de variables
Utilisation : $variable
Les variables SCSS permettent de stocker des valeurs réutilisables dans un seul emplacement.
Exemple :
$primary-color: #3498db;
.element {
color: $primary-color;
}