[HTML|JS|CSS] Sass: Funkcje

Składania Sass umożliwia z jednej strony definiowanie funkcji przez programistę, a z drugiej korzystanie z wbudowanych funkcji. Własną funkcję można zdefiniować, a następnie wykorzystać w następujący sposób:

@function myFun($clr, $alpha)
{
 @if $alpha < 0.3
 {
  @return rgba($clr, $alpha + 0.1);
 }
 @else 
 {
  @return rgba($clr, $alpha + 0.3);
 } 
}

.black-class
{
 color: myFun(black,0.4);
}

Po transformacji:

.black-class {
  color: rgba(0, 0, 0, 0.7); }

Poza własnymi funkcjami możemy skorzystać z gotowych funkcji: Pełna lista możliwości znajduje się tutaj.

Przykładowe użycia funkcji Sass:

• Konwersje RGB i HSL

$mycolor : #ABCDEF;

.myred{
 background-color: red($mycolor);
}

.mygreen{
 background-color: green($mycolor);
}

.myblue{
 background-color: blue($mycolor);
}

.mygrey{
 background-color: grayscale($mycolor);
}

.mysaturate{
 background-color : saturate($mycolor);
}

.mytransparent{
 background-color: transparentize($mycolor, 0.4);
}

•  Wsparcie dla obliczeń

$totalwidth : 1050;
$innerwidth : 1442;

.computed-width
{
 width: round(percentage($totalwidth / $innerwidth));
} 

• Operacje na kolekcjach

$list : (11px,14px,54px,23px);

.aggregates{
 width: max(11px,14px,54px,23px);
 height : min(11px,14px,54px,23px);
 margin-bottom: length($list);
}