Zyrex

Bardziej zaawansowane manipulowanie stylami: LESS i SASS

LESS i SASS to preprocesory CSS, które pozwalają na użycie zaawansowanych technik programowania w stylach CSS. Obydwa te narzędzia pozwalają na użycie zmiennych, funkcji, pętli i innych konstrukcji programistycznych, które ułatwiają tworzenie i zarządzanie dużymi projektami CSS.

LESS (ang. Leaner Style Sheets) jest preprocesorem, który rozszerza składnię CSS o dodatkowe możliwości. Przykładowo, możesz użyć zmiennych w LESS, co pozwala na zdefiniowanie wspólnych wartości i ich późniejsze wykorzystanie w kilku miejscach w kodzie. Możesz też używać funkcji i operatorów matematycznych w LESS, co pozwala na bardziej zaawansowane obliczenia i manipulacje stylami.

SASS (ang. Syntactically Awesome Style Sheets) to inny popularny preprocesor CSS, który również pozwala na użycie zmiennych, funkcji i pętli. Oprócz tego SASS posiada również tzw. mixiny, czyli fragmenty kodu, które mogą być „wymieszane” (ang. mixed) z innymi stylami. Mixiny pozwalają na przenoszenie często używanych styli w kilku miejscach w kodzie do osobnego pliku i ich późniejsze wykorzystywanie w różnych miejscach bez konieczności powtarzania całego kodu.

Poniżej znajduje się przykładowy kod CSS napisany z użyciem LESS:

@color: red;

.button {
  color: @color;
  border: 1px solid @color;
}

.alert {
  color: @color;
  border: 1px solid @color;
}

W powyższym przykładzie została użyta zmienna o nazwie @color, która została zdefiniowana jako red. Następnie ta zmienna została wykorzystana w dwóch miejscach w kodzie CSS, co pozwala na zmianę koloru dla elementów .button i .alert za pomocą jednej zmiennej. Gdybyśmy chcieli zmienić kolor dla tych elementów na inny, wystarczyłoby zmienić wartość zmiennej @color na inną.

LESS posiada również inne możliwości, takie jak funkcje, pętle i operatory matematyczne, które pozwalają na bardziej zaawansowane manipulowanie stylami. Przykładowo, możemy użyć funkcji darken do przyciemnienia koloru o określony stopień:

@color: red;
@dark-color: darken(@color, 20%);

.button {
  color: @color;
  border: 1px solid @color;
}

.alert {
  color: @dark-color;
  border: 1px solid @dark-color;
}

W powyższym przykładzie zmienna @dark-color zawierać będzie kolor ciemniejszy od @color o 20%.

Poniżej znajduje się przykładowy kod CSS napisany z użyciem SASS:

$color: red;

.button {
  color: $color;
  border: 1px solid $color;
}

.alert {
  color: $color;
  border: 1px solid $color;
}

Kod ten robi dokładnie to samo co wcześniejszy przykład napisany w LESS.

SASS posiada również tzw. mixiny, czyli fragmenty kodu, które mogą być „wymieszane” (ang. mixed) z innymi stylami. Mixiny pozwalają na przenoszenie często używanych styli w kilku miejscach w kodzie do osobnego pliku i ich późniejsze wykorzystywanie w różnych miejscach bez konieczności powtarzania całego kodu. Oto przykład mixina:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

.alert {
  @include border-radius(10px);
}

W powyższym przykładzie została zdefiniowana mixina o nazwie border-radius, która pozwala na ustawienie zaokrąglenia krawędzi elementów HTML. Mixina przyjmuje jeden argument – wartość promienia zaokrąglenia. Mixina zostaje wywołana za pomocą słowa kluczowego @include, a następnie przekazuje się jej odpowiednią wartość. W przykładzie powyżej element .button będzie miał zaokrąglone krawędzie o promieniu 5px, a element .alert będzie miał zaokrąglone krawędzie o promieniu 10px.

Mixiny są bardzo przydatnym narzędziem w SASS, pozwalają na zorganizowanie i uporządkowanie kodu CSS oraz ułatwiają jego późniejsze wykorzystywanie w różnych miejscach.