Petite présentation de SCSS

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;
}

Liste des fonctions SASS