Petite présentation de SCSS

par Rémi Leclerc, le 03/05/2015
SCSS est un langage de génération dynamique de fichiers CSS. Il permet notamment :
- La création et l'utilisation de variables,
- La création et l'utilisation de fonctions,
- L'utilisation de fonctions natives,
- L'utilisation d'opérateurs pour les calculs.
Installation
Il faut installer SASS avec Gems.
Par exemple, sous une distribution Linux utilisant le sytème APT :
sudo apt-get install rubygems
sudo gem install sass
Exemple d'utilisation SCSS
Exemple avec un fichier test.css
:
$bleu: #04f;
$rouge: #f00;
$taille: 14px;
@mixin bordure($taille: 10px) {
border-width:$taille;
border-style: solid;
border-color:lighten($bleu, 20%);
}
.bordureHaut {
@include bordure();
}
.bordureBas {
@extend .bordureHaut;
border-width:$taille / 2;
}
.bordureBas:hover {
border-color:$rouge;
}
La génération du fichier CSS s'effectue avec la commande :
sass test.scss test.css
Le résultat sera :
.bordureHaut, .bordureBas {
border-width: 10px;
border-style: solid;
border-color: #ccdaff;
}
.bordureBas {
border-width: 7px;
}
.bordureBas:hover {
border-color: red;
}