Se connecter Recherche

Vous avez préalablement lu mon article sur les syntaxes de bases du langage SASS et commencez à devenir accro à cette nouvelle méthode de création de feuilles de style. Puisque vous êtes sur la voie de faire de l’écriture Syntactically Awesome StyleSheets votre référence pour gérer vos CSS, il vous faut également connaître les syntaxes avancées proposées. C’est ce que nous allons voir aujourd’hui.

Operations

SASS vous permet de réaliser des calculs mathématiques pendant l’écriture de votre code. Ces opérations seront calculées et le résultats restitué lors de la création du code CSS. Les possibilités restent bien sur bloquées à des additions, soustractions, multiplications et divisions, mais ces 4 fonctions vous autorisent déjà pas mal de calculs.

Prenons en exemple le code SASS:

$a: 2px;
$b: 10px;
 
$c: $a + $b;
$d: $b - $a;
$e: 2 * $b;
$f: $b / 2;
.result1 {
 font-size: $c;
}
.result3 {
 font-size: $d;
}
.result4 {
 font-size: $e;
}
.result5 {
 font-size: $f;
}
.container { width: 100%; }
article {
 float: left;
 width: 600px / 960px * 100%;
}
aside {
 float: right;
 width: 300px / 960px * 100%;
}

Sera restitué en sortie CSS

.result1 {
 font-size: 12px;
}
.result3 {
 font-size: 8px;
}
.result4 {
 font-size: 20px;
}
.result5 {
 font-size: 5px;
}
.container {
 width: 100%;
}
article {
 float: left;
 width: 62.5%;
}
aside {
 float: right;
 width: 31.25%;
}

Maps

L’utilisation de la fonction map vous permet de récupérer une valeur dans une variable préalablement définie en utilisant une syntaxe très classique dans le developpement web: map-get($var, $key). En exemple, nous allons récupérer uniquement la valeur de couleur définie dans une variable nommée properties.

Prenons en exemple le code SASS:

$properties: (
 background: red,
 color: blue,
 font-size: 1em,
 font-family: (Helvetica, arial, sans-serif)
);
.foo {
 color: map-get($properties, color);
}

Sera restitué en sortie CSS

.foo {
 color: blue;
}

Placeholder selector (@extend)

Les placeholders sont déclarés et étendues exactement de la même manière que les classes sauf le point est remplacé par un symbole de pourcentage (%). Ces derniers ont la propriété de ne pas apparaître dans le CSS généré car leurs propriétés seront inclusent uniquement dans les sélecteurs qui les utilisent.

Prenons en exemple le code SASS:

%foo {
 color: red;
}
.bar {
 @extend %foo;
 background: blue;
}
.baz {
 @extend %foo;
 background: yellow;
}

Sera restitué en sortie CSS

.bar, .baz {
 color: red;
}
.bar {
 background: blue;
}
.baz {
 background: yellow;
}

Extend

Encore une des caractéristiques les plus utiles de SASS. l’utilisation de @extend vous permet de partager un ensemble de propriétés CSS d’un sélecteur à l’autre. Il permet de conserver un code court et bien organiser (pour peu que vous utilisiez l’indentation). Contrairement à l’utilisation de Placeholder, la déclaration se fait dans une classe dont les valeurs seront affichées dans le fichier CSS. Dans cet exemple, nous allons créer une simple série de style de boite de message pour l’affichage par defaut, les erreurs, les avertissements et les réussites.

Prenons en exemple le code SASS:

.message {
 border: {
 width: 1px;
 style: solid
 }
 padding: 10px;
 color: #333;
}
.message {
&.default {
 @extend .message;
 border-color: #ccc;
}
&.success {
 @extend .message;
 border-color: green;
}
&.error {
 @extend .message;
 border-color: red;
}
&.warning {
 @extend .message;
 border-color: yellow;
}
}

Sera restitué en sortie CSS

.message, .message.default, .message.success, .message.error, .message.warning {
 border-width: 1px;
 border-style: solid;
 padding: 10px;
 color: #333;
}
.message.default {
 border-color: #ccc;
}
.message.success {
 border-color: green;
}

.message.error {
 border-color: red;
}

.message.warning {
 border-color: yellow;
}

Mixin

Un mixin vous permet de créer des ensembles de déclarations CSS que vous souhaitez réutiliser tout au long de votre site. Vous pouvez même passer des valeurs pour rendre votre mixin plus souple (cf. mixin avec variable ci-après).

Prenons en exemple le code SASS:

@mixin aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto;
}
.div-selector {
 @include aligncenter;
 background:#ddd;
}

Sera restitué en sortie CSS

.div-selector {
 display: block;
 margin-left: auto;
 margin-right: auto;
 background: #ddd;
}

Mixin avec variable

Similaire au mixin précédent, nous allons cette fois créer un mixin regroupant des préfixes de border-radius selon les différents navigateurs et y ajouter une variable. Ce mixin nous permettra de ne pas avoir à réécrire ces préfixes à chaque fois mais uniquement de définir la valeur attendue.

Prenons en exemple le code SASS:

@mixin border-radius($radius:5px) {
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
}
button {
@include border-radius;
}
.block-button {
@include border-radius($radius:9px);
}

Sera restitué en sortie CSS

button {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -ms-border-radius: 5px;
 border-radius: 5px;
}
.block-button {
 display: block;
 -moz-border-radius: 9px;
 -webkit-border-radius: 9px;
 -ms-border-radius: 9px;
 border-radius: 9px;
}

If et Else

La directive if prend une condition à évaluer et renvoie les styles imbriqués si la condition est true (vrai). Comme pour le PHP ou JS,  le résultat à renvoyer si la condition est False est défini en utilisant l’instruction Else. Par exemple, vous pouvez créer un mixin qui gère l’affichage ou nom d’un élément et définir la condition lors de la création de la règle de style.

Prenons en exemple le code SASS:

@mixin simple-mixin($displayed: true) {
 @if $displayed {
 display: block
 }
 @else {
 display: none
 }
 }
.selector {
 @include simple-mixin;
 }
.selector2 {
 @include simple-mixin($displayed: false);
 }

Sera restitué en sortie CSS

.selector {
 display: block;
}
.selector2 {
 display: none;
}

For

La directive for passe sur son contenu, un nombre de fois défini, une variable dont la valeur augmente à chaque itération. Cette fonction vous fait gagner un temps précieux pour un CSS qui se trouve etre similaire. Dans cette exemple, nous allons automatiquement créer 4 règles de colonnes dont la largeur sera définie par une opération. Le gain de temps: Si vous souhaitez créer 12 colonnes, par exemple, il vous suffit de modifier la valeur de la variable $columns.

Prenons en exemple le code SASS:

$columns: 4;
@for $i from 1 through $columns {
 .cols-#{$i} {
 width: ((100 / $columns) * $i) * 1%;
 }
}

Sera restitué en sortie CSS

.cols-1 {
 width: 25%;
}
.cols-2 {
 width: 50%;
}
.cols-3 {
 width: 75%;
}
.cols-4 {
 width: 100%;
}

While

L’utilisation de la boucle While permet de reproduire continuellement une règle de style jusqu’à ce que la condition soit évaluée à false (ou 0). Dans cet exemple, nous répetons l’opération 4 fois avec une valeur de columns diminuant de 1 à chaque passage ($column: $column – 1;). Au 4 passage effectué, la fonction s’arrète car $columns ne respecte plus la condition > 0. Pour ne faire que 2 passages, nous aurions utilisé $column: $column – 2; ou bien $column: 2;

Prenons en exemple le code SASS:

$column: 4;
@while $column > 0 {
 .cols-size-#{$column} {
 width: (100 / $column) * 1%;
 }
 $column: $column - 1;
}

Sera restitué en sortie CSS

.cols-size-4 {
 width: 25%;
}
.cols-size-3 {
 width: 33.33333%;
}
.cols-size-2 {
 width: 50%;
}
.cols-size-1 {
 width: 100%;
}

Each

La déclaration de Each est similaire à For car elle est elle même une boucle, mais il n’y a pas de variable d’itération puisque each effectuera un passage pour chaque valeur d’élément indiqués dans la liste, ni plus ni moins.

Prenons en exemple le code SASS:

$backs: ("green", "red", "orange");
@each $back in $backs {
 .box-#{$back} {
 background-color: #{$back};
 }
}

Sera restitué en sortie CSS

.box-green {
 background-color: green;
}
.box-red {
 background-color: red;
}
.box-orange {
 background-color: orange;
}

Vous avez maintenant connaissances des principaux principes d’utilisation du langage SASS et allez pouvoir commencer à créer des feuilles de styles dynamiques qui ne ferons qu’améliorer votre productivité. Si vous souhaitez aller plus loin dans la maitrise du Syntactically Awesome Style Sheets, jevous laisse vous référer à la documentation officielle.

Commentaires Écrire un commentaire

  • Patrick Javelle le 6 septembre 2017 at 14 h 27 min Répondre

    Cet article résume parfaitement bien l’énorme potentiel de SASS. Personnellement je ne m’en passe plus, couplé à Gulp pour l’export automatique en minifier, le regroupement de plusieurs feuilles de styles pour n’en faire qu’une, cet outil simplifie la vie des webdesigners et de développeurs.
    Merci !


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*