Fonctions

SASS contient une grande quantité de fonctions natives, mais vous pouvez aussi créer vos propres fonctions.

MéthodeCréation

1
@function somme($a: 1, $b : 2){
2
    @return $a + $b;
3
}
4
.classe1{
5
  width: somme()*1px;
6
}
7
.classe2{
8
  width: somme(5)*1px;
9
}
10
.classe3{
11
  width: somme(9,6)*1px;
12
}

Ce qui donne

1
.classe1 {
2
  width: 3px; }
3
4
.classe2 {
5
  width: 7px; }
6
7
.classe3 {
8
  width: 15px; }
MéthodeQuelques fonctions
http://sass-lang.com/documentation/Sass/Script/Functions.html
mix($color1, $color2, [$pourcentage]) : mélange le pourcentage de la première couleur dans la deuxième. mix(#f00, #00f, 25%) => #3f00bf
darken($color, $poucentage) : assombrie une couleur. darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
saturate($color, $pourcentage) : donne une couleur plus saturée. saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%)
desaturate($color, $pourcentage) : donne une couleur moins saturée. desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%)
ligthen($color, $pourcentage) : éclaire une couleur. lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30)
complement($color) : retourne le complément d'une couleur. complement(#aabbcc) => #ccbbaa
fade-in($color, $pourcentage) : opacifie la couleur. fade-in(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
fade-out($color, $pourcentage) : rebd plus transparent la couleur. fade-out(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)