close
photo-1450101215322-bf5cd27642fc

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:

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:

funkcje_lighten20

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

Darken:

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:

funkcje_darken10

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

Saturate:

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:

funkcje_saturate30

Desaturate:

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

funkcje_desaturate30

Adjust_hue:

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:

funkcje_adjusthue340

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.

Tags : barwyfunkcjekolorykurssassscss
  • Mariusz

    Krótko, ale fajnie i na temat. Ja bym proponował, aby kliknięcie w obrazek nie powodowało otwarcie go za pomocą bezpośredniego linku, a jakiś lightbox 🙂

    Pozdrawiam!

    • Bartłomiej Mąkina

      Dzięki za radę 🙂 Lightbox został już dodany.

      Pozdrawiam 🙂