SASS - Syntactically Awesome Style Sheets

Auteur: Mohamed CHINY Durée necessaire pour le cours de SASS - Syntactically Awesome Style Sheets Niveau recommandé pour le cours de SASS - Syntactically Awesome Style Sheets Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 2: Fonctionnalités de SASS - Première partie

Toutes les pages

SASS - Syntactically Awesome Style Sheets

Page 1
SASS c'est quoi, et comment l'installer?
Page 2
Fonctionnalités de SASS - Première partie
Page 3
Fonctionnalités de SASS - Deuxième partie
Notez que c'est la syntaxe SCSS que l'on va utiliser dans la suite de ce cours plutôt que la syntaxe indentée.

Les commentaires

En SASS il est possible de commenter son code. A cet effet deux méthodes sont offertes
  • Commentaire de fin de ligne: grâce au symbole double slash (//) on peut commenter une ligne entière. Le commentaire en double slash n'est pas compilé et ne sera donc pas visible dans le code CSS final.
  • Bloc commentaire: Comme en CSS, un bloc commentaire est entouré par /* et */ et il peut s'étaler sur plusieurs lignes. Le bloc commentaire est compilé avec SASS et sera donc visible dans le code CSS final.

Exemple
// Commentaire de fin de ligne
/* Bloc commentaire */
Après compilation on obtient le code CSS suivant:
/* Bloc commentaire */

Les variables

Généralités

Les variables en SASS sont préfixés par un dollar (un petit clin d'oeil aux développeurs PHP ;) . Ils permettent de stocker les valeurs CSS (et parfois même les propriétés).

Exemple
$red:#F00;
$gray:#EEE;

.annuler{
   border:solid 1px $red;
   background-color: $gray;
}
Après compilation on obtient le CSS suivant:
.annuler {
   border: solid 1px #F00;
   background-color: #EEE;
}

Variables globales

Une variable déclarée en dehors d'un bloc (ensemble de styles pour un sélecteur) est par défaut globale. Par contre une variable déclarée dans un bloc est locale à ce bloc là et ne sera donc pas reconnue ailleurs. Une telle pratique soulèvera même une erreur de compilation. Pour qualifier une variable de globale même si elle est déclarée dans un bloc alors on doit le préciser à l'aide de la séquence !global.

Exemple
$red:#F00;
$gray:#EEE;

.annuler{
   $green:#0F0 !global; // Variable globale
   border:solid 1px $red;
   background-color: $gray;
}
.valider{
   border:solid 1px $green;
   background-color: $gray;
}
Après compilation on obtient le code CSS suivant:
.annuler {
   border: solid 1px #F00;
   background-color: #EEE;
}
.valider {
   border: solid 1px #0F0;
   background-color: #EEE;
}

Le nesting

Comme pour LESS, le nesting en SASS permet d'imbriquer les sélecteurs d'une manière proche d'une structure HTML, facilement compréhensible et maintenable.

Exemple
header{
   div{
      p{
         background-color:#EEE;
      }
   }
}
Après compilation on obtient le CSS suivant:
header div p {
   background-color: #EEE;
}
Si on veut faire appel au sélecteur courant on fait appel au symbole & (comme pour LESS):
header{
   div{
      p{
         background-color:#EEE;
         &:hover{ // Ce qui signifie p:hover
            background-color:#DDD;
         }
      }
   }
}
La compilation donne:
header div p {
   background-color: #EEE;
}
header div p:hover {
   background-color: #DDD;
}
On peut également utiliser les expressions d'imbrication de sélecteurs de CSS.

Exemple
header{
   padding:10px;
   >div{
      display:inline-block;
   }
}
donne le CSS suivant
header {
   padding: 10px;
}
header > div {
   display: inline-block;
}
D'autres expressions comme ~ ou + sont aussi valables.
Il est même possible de restructurer les propriété CSS composées comme font-*, background-*...

Exemple
h1{
   font:{ // Ne pas oublier les deux points
      size:12pt;
      weight:normal;
      variant:small-caps;
   }
}
Ce qui donne:
h1 {
   font-size: 12pt;
   font-weight: normal;
   font-variant: small-caps;
}