Les pré-processeurs CSS sont des outils qui permettent aux développeurs web de générer des feuilles de style CSS de manière plus efficace et organisée. Les pré-processeurs CSS tels que Sass (Syntactically Awesome Style Sheets) sont des langages de feuilles de style qui sont compilés en CSS standard.
SCSS (Sassy CSS) est une syntaxe alternative de Sass, qui ressemble plus étroitement à la syntaxe CSS standard. Cela rend la transition de CSS à SCSS plus facile pour les développeurs. SCSS offre également des fonctionnalités supplémentaires telles que les variables, les mixins, les fonctions, les boucles et les conditions, qui ne sont pas disponibles dans CSS standard.
Les variables en SCSS permettent de stocker des valeurs telles que des couleurs, des tailles de police ou des marges, et de les utiliser à plusieurs endroits dans une feuille de style.
$base: #f2f2f2;
$contrast: #4d413f;
$contrast-10: rgba($contrast, 0.1);
$contrast-20: rgba($contrast, 0.2);
$contrast-50: rgba($contrast, 0.5);
$primary: #ff4523;
Les mixins sont des blocs de code réutilisables qui peuvent être inclus dans différentes parties de la feuille de style.
@mixin padding($num) {
padding: $num;
}
@mixin margin($num) {
margin: $num;
}
@mixin marginAndPadding($num) {
margin: $num;
padding: $num;
}
.btn {
@include padding(0.5rem);
border: 1px solid $primary;
}
Les fonctions permettent de calculer des valeurs dynamiques en fonction d'arguments passés. Les boucles et les conditions permettent de générer des styles complexes de manière dynamique.
@function percentage($value, $total) {
@return ($value / $total) * 100%;
}
.width-50 {
width: percentage(500px, 1000px); //Retourne : width:50%;
}
SCSS permet également la modularisation de la feuille de style, en divisant la feuille de style en plusieurs fichiers SCSS et en les important dans une feuille de style principale. Cela facilite la gestion de la feuille de style et la collaboration entre les développeurs.
@for $i from 1 through 12 {
.col-#{$i} {
width: #{100%/$i};
}
}
$colors: #ff0000, #00ff00, #0000ff;
@each $color in $colors {
.color-#{$color} {
background-color: $color;
}
}
Les boucles en SCSS sont des fonctionnalités qui permettent de générer des styles de manière répétitive. Les boucles peuvent être utilisées pour répéter une même instruction un certain nombre de fois ou pour parcourir une liste de valeurs et effectuer une instruction pour chaque valeur de la liste.
@for $i from 1 through 12 {
.col-#{$i} {
width: #{100%/$i};
}
}
$colors: #ff0000, #00ff00, #0000ff;
@each $color in $colors {
.color-#{$color} {
background-color: $color;
}
}
En résumé, les pré-processeurs CSS tels que SCSS permettent aux développeurs de créer des feuilles de style CSS plus efficaces et organisées en utilisant des fonctionnalités telles que les variables, les mixins, les fonctions, les boucles et les conditions, ainsi que la modularisation de la feuille de style.
Votre navigateur ne comprendra pas le SCSS, vous ne pouvez le charger directement. Il vous faudra donc "compiler" (comprenez "transformer") votre SCSS en CSS.
La plupart des développeurs utilisent des techniques modernes avec du JavaScript orienté serveur pour compiler du SCSS en CSS. Mais pas de panique, nous utiliserons dans un premier temps un logiciel qui le fait. "Scout App".
Pour compiler du SCSS avec Scout App, vous pouvez suivre les étapes suivantes :