Kurs SASS dla początkujących cz.3 Funkcje

Preprocesor SASS udostępnia bardzo wiele gotowych funkcji, których możemy użyć w naszych projektach. Przyjrzyjmy się niektórym z nich.

W tym artykule przedstawię Ci 5 funkcji SASS, które działają na kolorach. Pełną listę funkcji wraz z opisem możesz znaleźć tutaj. Przejdźmy do pierwszej funkcji.

Lighten:

.before {
  background: #00405d;
}

.after {
  background: lighten(#00405d, 20);
}

Klasa .before nadaje kontenerowi tło bez użycia funkcji a .after ten sam kolor tła modyfikuje przy użyciu funkcji lighten. Ta funkcja przyjmuje wartości od 0 do 100. W przykładzie powyżej zastosowane jest 20% rozjaśnienie. Efekt:

Lighten można zastosować do dobrania koloru tekstu, który będzie dobrze kontrastował z ciemnym tłem.

Darken:

.before {
  background: #00405d;
}

.after {
  background: darken(#00405d, 10);
}

Funkcja darken działa odwrotnie do funkcji lighten – sprawia, że kolor jest ciemniejszy. Przyjmuje wartości od 0 do 100. W przykładzie użyte jest 10% przyciemnienie. Efekt:

Darken można użyć przy dobieraniu koloru tekstu, który będzie dobrze kontrastował z jasnym tłem.

Saturate:

.before {
  background: #dd405d;
}

.after {
  background: saturate(#dd405d, 30);
}

Saturete zwiększa saturację koloru, czyli jego nasycenie, intensywność. Podobnie jak poprzednie funkcje przyjmuje wartości od 0 do 100. W przykładzie używamy 30% saturacji:

Desaturate:

.before {
  background: #ff1e48;
}

.after {
  background: desaturate(#ff1e48, 30);
}

Funkcja desaturate działa odwrotnie do desaturate. Również przyjmuje wartości pomiędzy 0 i 100. Zmniejsza intensywność koloru. Efekt:

Adjust_hue:

.before {
  background: #00405d;
}

.after {
  background: adjust_hue(#00405d, 340);
}

Ta funkcja w pierwszym parametrze przyjmuje kolor a w drugim liczbę stopni z zakresu -360 -> 360. O tą ilość stopni zostanie obrócone koło kolorów (color wheel) począwszy od wskazanego koloru. Efekt:

To już wszystkie funkcje, które chciałem przedstawić w tym artykule. Pełną listę funkcji możesz znaleźć tutaj. Oprócz innych funkcji, które działają na kolorach możesz znaleźć tam również te zmieniające przezroczystość, wykonujące różne operacje na ciągach, liczbach, listach i wiele innych.