Le langage SASS - { my logbook }

Une définition de Wikipedia :

Sass (Syntactically Awesome Stylesheets) est un langage de génération de feuilles de style initialement développé par Hampton Catlin et Nathalie Weizenbaum.
Sass est un langage de feuilles de style en cascade (CSS). C’est un langage de description qui est compilé en CSS. SassScript est un langage de script pouvant être utilisé à l’intérieur du code Sass. Deux syntaxes existent. La syntaxe originale, nommée « syntaxe indentée », est proche de Haml. La nouvelle syntaxe se nomme SCSS. Elle a un formalisme proche de CSS.

Les variables

Une variable peut contenir plusieurs types d’information : un code couleur, un calcul ou encore une valeur vrai/faux (booléen).

Pour utiliser une variable, on doit la déclarer avec l’aide du signe « $ » (dollars) suivi de son nom et de sa valeur : $background: rgba(black, .2);

Une fois déclarée, la variable peut être appelée n’importe où dans la suite du document, même si elle est définie dans un fichier importé à l’aide de @import.

$color-success: green;
$color-error: red;
$color-info: blue;$font-size: 14px;

.success,
.error,
.info {
font-size: $font-size;
}

.success {
color: $color-success;
}

.error {
color: $color-error;
}

.info {
color: $color-info;
}

Code CSS généré :

.success,
.error,
.info {
font-size: 14px;
}.success {
color: green;
}

.error {
color: red;
}

.info {
color: blue;
}

L’imbrication

L’imbrication est la principale caractéristique de SASS. Grâce à elle, l’écriture du code CSS est beaucoup plus rapide, simple et compréhensible. Elle aide à avoir un code propre, logique et bien organisé, qui devrait être plus facile à entretenir au cours du temps.

Exemple avec la couleur d’un lien et ses états hover et focus :

$link_color: #ce649b;
$color_hover: darken($link_color, 20%); // fonction SASS qui assombrit la couleur
$color_focus: lighten($link_color, 10%); // fonction SASS qui éclaircit la couleur// & : représente l’élément parenta {
color: $link_color;
&:hover {
color: $color_hover;
}
&:focus {
color: $color_focus;
}
}

CSS compilé :

.ice-blog a {
color: #ce649b;
}
.ice-blog a:hover {
color: #9b3168;
}
.ice-blog a:focus {
color: #da8bb4;
}

Les mixins

Une mixin est un morceau de code paramétrable et réutilisable n’importe où dans un fichier SASS. Comme pour une fonction, une mixin peut prendre des paramètres.

// Elle se définit grâce à la directive @mixin puis le nom que l’on souhaite lui attribuer
@mixin inline-block {
// code
}// Pour inclure le mixin, une ligne suffit
@include inline-block;

Mixin avec des paramètres

Grâce aux mixins, il est possible de générer plusieurs dizaines de lignes CSS avec une seule ligne (paramétrable, ou non) en SCSS !

Exemple :

@mixin inline-block ($align, $margin : 10px) { // Si aucune valeur n’est précisée alors $margin vaut 10px
display: inline-block;
vertical-align: $align;
margin-left: $margin;
}// Appel de la mixin
.bloc {
@include inline-block(middle);
}

Fichier CSS compilé :

.bloc {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}