Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Wprowadzenie do LESS

0

Ostatnimi czasy dwa razy w swoich postach poruszałem temat narzędzia Bootstrap. Wspomniałem tam między innymi, że możliwe jest skonfigurowanie własnych zmiennych LESS, które możemy później używać we własnych tematach… Stwierdziłem więc, że skoro jestem już przy narzędziach takich jak Bootstrap, to warto również poruszyć ten temat i zrobić małe wprowadzenie do LESS. Jako, że temat jest dość obszerny, postanowiłem że napiszę dwa wpisy na ten temat i w kolejnym postaram się dokładniej przybliżyć możliwości jakie daje nam opisywane narzędzie.

Co to jest LESS?

Dla porządku, najpierw kilka słów wyjaśnienia czym jest LESS i po co został stworzony… Zgodnie z tym co możemy znaleźć na stronie projektu, jest to swego rodzaju rozszerzenie dla CSS wprowadzające możliwość tworzenia zmiennych, funkcji i czegoś co w LESS nazywa się „mixin” (o tym za chwilę). To sprawia, że nasze CSS’y stają się dużo łatwiejsze w utrzymaniu i o wiele bardziej rozszerzalne.

LESS może być używany zarówno po stronie klienta, w przeglądarce internetowej (ten przypadek omówię w tym wpisie – myślę, że to najczęstszy przypadek jego użycia) jak i po stronie serwera za pomocą Node.js.

Jak zacząć używać LESS?

Jest to niezwykle proste. Wystarczy podlinkować style LESS dokładnie w ten sam sposób jak linkuje się style CSS ustawiając wartość „stylesheet/less” atrybutu „rel”. Przykład poniżej:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Oczywiście to nie wszystko, konieczne jest jeszcze dołączenie odpowiedniego skryptu JavaScript:

<script src="less.js" type="text/javascript"></script>

Odpowiedni skrypt można pobrać z GitHub’a. Przy tym wszystkim ważne jest aby sam styl LESS linkować przed załadowaniem skryptu JavaScript.

Należy jeszcze dodać, że przedstawiony powyżej sposób użycia LESS nie jest zalecany na produkcji (style LESS są za każdym razem kompilowane „w locie” podczas ładowania strony) – podczas „releasu” ostatecznej wersji strony, lepszym sposobem jest stworzenie stylów LESS gdzieś poza projektem, a następnie skompilowanie go jednym z wielu dostępnych do tego celu narzędzi. Kompilacja polega na „przetłumaczeniu” stylu LESS, na czysty CSS i dopiero taki plik należy linkować do ostatecznej strony internetowej.

Jak wyglądają style LESS?

Tak naprawdę jest to wymieszanie tradycyjnych styli CSS z różnego rodzaju „dodatkami” dostarczanymi przez LESS. Wszystkie te rozszerzenia sprawiają, że programowanie stylów staje się podobne do programowania w „normalnym” języku programowania. Spójrzmy na przykład jaki znalazłem na stronie projektu (trochę go okroiłem…) aby mieć pełen obraz tego jak to działa:

@base: #f938ab;

.box-shadow(@style, @c) {
  -webkit-box-shadow: @style rgba(0, 0, 0, @c);
  box-shadow:         @style rgba(0, 0, 0, @c);
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  .box-shadow(0 0 5px, 30%);
}

Wyjaśnianie zacznę od pierwszej linii. Jest to deklaracja zmiennej „base”, której ustawiamy w tym przypadku kod koloru. Zmienna ta może być później wielokrotnie wykorzystywana w kodzie LESS. W LESS wszystkie zmienne należy traktować jak zmienne typu „const”, tzn. ustawiamy je raz, na początku pliku, i nie możemy ich później zmieniać w kodzie LESS.

Następnie mamy do czynienia z czymś co nazywane jest „mixin”. Jest to coś w rodzaju zmiennej, która przechowuje definicje stylów. Można je później wiele razy wykorzystywać w kodzie LESS. W powyższym przykładzie widać, że „mixin” o nazwie „box-shadow” tak jak funkcja może przyjmować parametry wejściowe, które później wykorzystuje się w definicjach stylów.

Przejdźmy do definicji stylu dla klasy „box”. Wykorzystywane są tutaj wbudowane funkcje LESS takie jak „lighten” oraz „saturate”. Obie służą do sterowania kolorem – nie musimy sami sprawdzać jaki kolor będzie wynikiem rozjaśnienia czy nasycenia, LESS umie zrobić to za nas. W trzeciej linii tego stylu widzimy użycie zdefiniowanego wcześniej „mixin’a”. Prawda, że proste? Całość po skompilowaniu do stylu CSS powinna wyglądać mniej więcej tak:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

}

Wprowadzenie do LESS – podsumowanie

Na dziś to tyle… Myślę, że jak na wprowadzenie do LESS to wystarczy. Mam zamiar ten temat zgłębić dokładniej w jednym z kolejnych wpisów, tak że się nie martwcie… Będzie tego więcej! Zapraszam!

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!