vs

Extension des fichiers

*.less *.scss

*.sass

old!
Variable

@base-color: blue; $base-color: pink;

Variable globale/locale

$base-color: pink; variables.scss .unicorn { styles.css

color: yellow;
}
.unicorn { rainbow.scss .kitten {
$base-color: yellow; color: pink;
color: $base-color; }
}
.kitten {
color: $base-color;
}
!default et !global
→ http://codepen.io/anon/pen/kkXbVG

$base-color: yellow; theme.scss .unicorn { styles.css

color: yellow;
}
$base-color: pink !default; bootstrap.scss .kitten {
color: lightblue;
}
.unicorn { .fish {
styles.scss
color: $base-color; color: lightblue;
} }
.kitten {
$base-color: lightblue !global;
color: $base-color;
}
.fish {
color: $base-color;
}
Imbrication
→ pas de différence entre Sass et LESS

.row { styles.less .row { styles.scss

h2 { h2 {
color: @main-color; color: $main-color;
} }
.is-active { .is-active {
background-color: #EEE; background-color: #EEE;
} }
} }

.row h2 { styles.css .row h2 { styles.css

color: blue; color: pink;
} }
.row.is-active { .row.is-active {
background-color: #EEE; background-color: #EEE;
} }
&
→ pas de différence entre Sass et LESS

.kitten { styles.less .kitten .is-cute { … } styles.css

.is-cute { … } styles.scss
}
.kitten { .kitten .is-cute { … }
& .is-cute { … }
}
.kitten { .kitten.is-cute { … }
&.is-cute { … }
}
.kitten { .is-cute .kitten { … }
.is-cute & { … }
}
Mixin

.color(@color) { styles.less @mixin color($color) { styles.scss

background-color: @color; background-color: $color;
} }
.whale { .whale {
color(blue); @include color(pink);
} }
.fish { .fish {
.color(blue); @include color(pink);
} }

.whale { styles.css .whale { styles.css

background-color: blue; background-color: pink;
} }
.fish { background-color: blue; } .fish { background-color: pink; }
Extend
depuis v1.4

.fish { styles.less .fish { styles.scss

background-color: blue; background-color: pink;
} }
.whale { .whale {
width: 20rem; width: 20rem;
&:extend(.fish); @extend .fish;
} }

.fish, .whale { styles.css .fish, .whale { styles.css

background-color: blue; background-color: pink;
} }
.whale { .whale {
width: 20rem; width: 20rem;
} }
Extend ou Mixin ?

Exemple avec @mixin :

@mixin border { styles.scss .link { styles.css

border: 2px solid pink; border: 2px solid pink;
} }
.article a {
.link { border: 2px solid pink;
@include border; }
} .title a {
.article a { border: 2px solid pink;
@include border; }
}
.title a {
@include border;
}
Extend ou Mixin ?

Exemple avec @extend :

.border { styles.scss .border, styles.css

border: 2px solid pink; .link,
} .article a,
.title a {
.link { border: 2px solid pink;
@extend .border; }
}
.article a {
@extend .border;
}
.title a {
@extend .border;
}
Placeholder
→ “classe fantôme” proche des mixins mais fonctionne
sans paramètre

%border { styles.scss .link, styles.css

border: 2px solid pink; .article a,
} .title a {
border: 2px solid pink;
.link { }
@extend %border;
}
.article a {
@extend %border;
}
.title a {
@extend %border;
}
Mixin, extend, placeholder…
OK, mais je choisis quoi ?
Mixin ou placeholder ?
Mixin : Placeholder :

- répéter du code, - répéter du code,

- utiliser des variables, - utiliser des variables,
- créer des paramètres, - pas de paramètre ni de condition.
- ajouter des conditions.

styles.scss $medium: 800px; styles.scss

@mixin flex($direction, $justify-content, $wrap) { %center {
display: flex; margin: auto;
flex-direction: $direction; max-width: $medium;
justify-content: $justify-content; }
flex-wrap: $wrap;
} .box {
@extend %center;
.box { }
@include flex(row, center, wrap); .kiwi {
} @extend %center;
}
Mixin ou placeholder ?
Mixin : Placeholder :

- répéter du code, - répéter du code,

- utiliser des variables, - utiliser des variables,
- créer des paramètres, - pas de paramètre ni de condition.
- ajouter des conditions.

.box { styles.css .box, .kiwi { styles.css

display: flex; margin: auto;
flex-direction: row; max-width: 800px;
justify-content: center; }
flex-wrap: wrap;
}
Des listes et des conditions
→ Exemple issu d’un projet où le site se décline en plusieurs couleurs. Le changement de couleur
doit s’appliquer sur les bordures, les couleurs de fond et de texte (les titres par exemple). argument de la mixin

$color-list: (plum, $color-plum), mixins.scss @mixin apply-main-color($property) { mixins.scss

(purple, $color-purple), @each $colorclass, $colorvar in $color-list {
(raspberry, $color-raspberry), .main-color-#{$colorclass} &{
(orange, $color-orange), @if $property == color {
(yellow, $color-yellow), color: $colorvar;
[…] }
(carbon, $color-carbon); récupère les
valeurs de @if $property == border-color {
$color-list border-color: $colorvar;
}
$colorclass $colorvar
@if $property == background-color {
background-color: $colorvar;
}
}
}
}
Des listes et des conditions
→ Exemple issu d’un projet où le site se décline en plusieurs couleurs. Le changement de couleur
doit s’appliquer sur les bordures, les couleurs de fond et de texte (les titres par exemple).

.article a { styles.scss .main-color-blue .article a { styles.css

@include apply-main-color("color"); color: #0088CE;
} }
.main-color-purple .article a {
.focus { color: #A1006B;
@include apply-main-color("background-color"); }
} .main-color-raspberry .article a {
color: #CD0037;
}
.main-color-orange .article a {
Propriété CSS en argument
color: #E05206;
Seuls 3 arguments sont fonctionnels :
}
color, border-color et background-color
[…]

.main-color-blue .focus {
background-color: #0088CE;
}
[…]
Des fonctions
→ Exemple issu d’un projet où le site se décline en plusieurs couleurs et où les quelques icônes SVG sont gérées
en CSS avec background-image (selon une demande du client).

@function svgIcon($icon, $fillColor) { icons.scss @mixin icon($type, $fillColor, $rotation) { icons.css

background-repeat: no-repeat;
@if $icon == arrow { background-image: svgIcon('#{$type}', $fillColor);
@return svg-uri("<svg><path fill='" + $fillColor +
"'/></svg>"); // L’icône hérite de la couleur de la page
} @each $colorclass, $fillColor in $color-list {
.main-color-#{$colorclass} &{
@if $icon == download { background-image: svgIcon('#{$type}',
@return svg-uri("<svg><path fill='" + $fillColor + $fillColor);
"'/></svg>"); }
} }
récupère les
[…] // Rotation de l’icône (si besoin) valeurs de
@if $rotation == 0 { $color-list
} } @else {
transform: rotate($rotation);
}
}
Des fonctions
→ Exemple issu d’un projet où le site se décline en plusieurs couleurs et où les quelques icônes SVG sont gérées
en CSS avec background-image (selon une demande du client).

.icon-arrow { styles.scss .icon-arrow { styles.css

width: 3.2rem; width: 3.2rem;
height: 2.2rem; height: 2.2rem;
@include icon('arrow', $color-carbon, 0); background-repeat: no-repeat;
} background-image: url("data:image/svg+xml[…]");
}
.main-color-plum .icon-arrow {
background-image: url("data:image/svg+xml[…]");
}
.main-color-purple .icon-arrow {
background-image: url("data:image/svg+xml[…]");
}

[…]
Un peu de lecture

→ http://sass-lang.com/documentation/ (en EN)

→ https://sass-guidelin.es/fr/ (en FR)

→ https://la-cascade.io/tag/sass/ (en FR)

→ https://anotheruiguy.gitbooks.io/sassintherealworld_book-i/content/index.html (en EN)