SASS (Syntactically Awesome Style Sheets)
Page 2: Fonctionnalités de SASS - Première partie
Toutes les pages 
SASS (Syntactically Awesome Style Sheets)
Page 2
Fonctionnalités de SASS - Première partie
Fonctionnalités de SASS - Première 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 */
/* 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:
$gray:#EEE;
.annuler{
border:solid 1px $red;
background-color: $gray;
}
.annuler {
border: solid 1px #F00;
background-color: #EEE;
}
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:
$gray:#EEE;
.annuler{
$green:#0F0 !global; // Variable globale
border:solid 1px $red;
background-color: $gray;
}
.valider{
border:solid 1px $green;
background-color: $gray;
}
.annuler {
border: solid 1px #F00;
background-color: #EEE;
}
.valider {
border: solid 1px #0F0;
background-color: #EEE;
}
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:
div{
p{
background-color:#EEE;
}
}
}
header div p {
background-color: #EEE;
}
Si on veut faire appel au sélecteur courant on fait appel au symbole & (comme pour LESS):
background-color: #EEE;
}
header{
div{
p{
background-color:#EEE;
&:hover{ // Ce qui signifie p:hover
background-color:#DDD;
}
}
}
}
La compilation donne:
div{
p{
background-color:#EEE;
&:hover{ // Ce qui signifie p:hover
background-color:#DDD;
}
}
}
}
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.
background-color: #EEE;
}
header div p:hover {
background-color: #DDD;
}
Exemple
header{
padding:10px;
>div{
display:inline-block;
}
}
donne le CSS suivant
padding:10px;
>div{
display:inline-block;
}
}
header {
padding: 10px;
}
header > div {
display: inline-block;
}
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:
font:{ // Ne pas oublier les deux points
size:12pt;
weight:normal;
variant:small-caps;
}
}
h1 {
font-size: 12pt;
font-weight: normal;
font-variant: small-caps;
}
font-size: 12pt;
font-weight: normal;
font-variant: small-caps;
}
Page 2
Fonctionnalités de SASS - Première partie
Fonctionnalités de SASS - Première partie
