SASS (Syntactically Awesome Style Sheets)
Page 3: Fonctionnalités de SASS - Deuxième partie
Toutes les pages 
SASS (Syntactically Awesome Style Sheets)
Page 3
Fonctionnalités de SASS - Deuxième partie
Fonctionnalités de SASS - Deuxième partie
Le mixin
Le mixin est une technique très utile en SASS (et en LESS aussi). Elle rappelle le comportement d'une fonction dans un langage de programmation. En effet, il s'agit d'un ensemble de styles CSS réutilisables à chaque fois et sur plusieurs objets.Dans cet exemple nous allons déclarer un mixin du nom de myTransition:
@mixin myTransition{
transition-property:all;
transition-duration:1s;
transition-timing-function:ease;
}
transition-property:all;
transition-duration:1s;
transition-timing-function:ease;
}
Désormais nous disposons d'un mixin qui assure une transition CSS prédéfinie. Au moment où on en aura besoin il suffit de l'appeler sur le sélecteur souhaité comme ceci:
div{
&:hover{
@include myTransition;
}
}
Après compilation on obtient le CSS suivant:
&:hover{
@include myTransition;
}
}
div:hover {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
}
Le mixin précédent nous épargnera de réécrire les mêmes ligne pour chaque transition, mais vu comme ça, on peut imaginer que toutes les transitions qui feront appel à ce mixin auront le même effet, même durée... Heureusement, on va faire comme pour les fonctions, on lui passera des arguments.
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
}
Exemple
@mixin myTransition($property,$duration,$timing){
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
}
div{
&:hover{
@include myTransition(all, 1s, ease);
}
}
Le résultat CSS sera le même que précédemment:
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
}
div{
&:hover{
@include myTransition(all, 1s, ease);
}
}
div:hover {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
}
Mais là, vous avez pu deviner que l'on peut réutiliser cette transition à l'infini et avec des valeurs différentes à chaque fois.
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
}
Comme pour les fonctions, on peut aussi déclarer un argument par défaut lors de la création du mixing comme ceci:
@mixin myTransition($property,$duration,$timing:ease){
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
}
div{
&:hover{
@include myTransition(all, 1s);
}
}
Ce qui donne le même résultat CSS:
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
}
div{
&:hover{
@include myTransition(all, 1s);
}
}
div:hover {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
}
Vous avez remarqué que lors de l'appel de notre mixin nous avons oublié (ou laissé délibérément) l'argument $timing, mais celui ci a une valeur par défaut qui est ease. Si nous avons communiqué une valeur explicite de $timing lors de l'appel du mixin, alors elle écrasera la valeur par défaut.
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
}
L'importation
SASS ne permet pas que de réutiliser un bloc de style (mixing) mais il permet également la réutilisation d'un autre fichier SASS (ou CSS) existant. On appelle cette opération l'importation.Imaginons que nous avons deux fichiers SASS différents, l'un s'appelle inc.scss et l'autre (celui sur lequel on travaille) s'appelle style.scss.
Le fichier inc.scss contient ce petit code:
// inc.scss
$opacity:0.5;
Le fichier style.scss contient ceci:
$opacity:0.5;
// style.scss
@import "inc.scss";
.icon{
opacity: $opacity;
}
Le fait de déclarer la ligne @import "inc.scss" va importer le contenu de ce fichier là dans le fichier courant, et la compilation donnera le CSS suivant:
@import "inc.scss";
.icon{
opacity: $opacity;
}
.icon {
opacity: 0.5;
}
opacity: 0.5;
}
Notez que la déclaration de l'extension .scss lors de l'importation est facultative. Autrement dit, on pourrait bien remplacer la ligne @import "inc.scss"; par @import "inc";
Maintenant, jetez un oeil sur votre dossier css (ou celui qui contient le résultat de la compilation). Vous allez voir qu'il contient deux fichiers CSS: style.css qui est notre CSS généré et inc.css qui est le résultat de compilation de inc.scss seul. Cependant, nous n'avons pas vraiment besoin de ce inc.css, donc pour inciter le compilateur à ne générer qu'un seul fichier CSS (notre fameux style.css) on va renommer inc.scss en _inc.scss. Le underscore (ou souligné pour les puristes) indique au compilateur qu'il s'agit d'un SCSS à inclure, inutile alors d'en générer du CSS.
Maintenant on va reprendre le même code que précédement:
// _inc.scss
$opacity:0.5;
$opacity:0.5;
// style.scss
@import "inc.scss"; // Ne pas mettre le underscore dans le nom du fichier
.icon{
opacity: $opacity;
}
Après compilation on obtient toujours
@import "inc.scss"; // Ne pas mettre le underscore dans le nom du fichier
.icon{
opacity: $opacity;
}
.icon {
opacity: 0.5;
}
Mais cette fois ci, le dossier css ne contient qu'un seul fichier CSS style.css.
opacity: 0.5;
}
Les opérations
SCSS permet d'effectuer des opérations arithmétiques (et logiques) sur les opérandes exactement comme pour un langage de programmation. Les opérateurs les plus connus sont l'addition (+), la soustraction (-), la multiplication (*) et la division (/).Exemple:
$marge1:20px;
$marge2:30px;
.icon{
margin-left:$marge1 + $marge2;
}
Après compilation on obtient:
$marge2:30px;
.icon{
margin-left:$marge1 + $marge2;
}
.icon {
margin-left: 50px;
}
Les opérations peuvent concerner toues les valeurs CSS numériques (dimensions, couleurs, opacité...)margin-left: 50px;
}
Page 3
Fonctionnalités de SASS - Deuxième partie
Fonctionnalités de SASS - Deuxième partie
