Wprowadzenie do LESS - Kamil Wyremski

Ten wpis powinienem tak naprawdę stworzyć już kilka lat temu. Był na liście TODO ale zawsze go pomijałem. LESS chyba już na dobre zagościł w CSS, ale jeśli jeszcze go nie używasz, mam nadzieję, że ten krótki artykuł Cię do tego zachęci.

Ogólnie LESS to rozszerzenie języka CSS dzięki któremu dostajemy do dyspozycji kilka użytecznych narzędzi których nie ma w standardowym CSS. Aby przeglądarka mogła go „zrozumieć” kod LESS musi zostać skompilowany do kodu CSS.

Przykładowe możliwości:

Zmienne

Wyobraźmy sobie, że dla wielu elementów mamy taki sam margines wynoszący 10px. Możemy wtedy zadeklarować zmienną i następnie ją wykorzystać:

@margin: 10px; 
@margin-bigger: @margin + 5px; 
#header { 
  margin: @margin; 
}
#header {
  margin: @margin;
}
#footer{
  margin: @margin-bigger;
}

Zostanie wygenerowany następujący kod:

#header { 
  margin: 10px; 
}
#header {
  margin: 10px;
}
#footer{
  margin: 15px;
}

Jeślibyśmy chcieli zmienić margines to nie musimy robić tego w każdym miejscu a tylko w zmiennej @margin. Podobnie możemy zrobić z innymi właściwościami CSS np. z kolorami. Teraz wystarczy że zadeklarujesz np. główny kolor i wszędzie w aplikacji zamiast wpisywać kod koloru wystarczy odwołać się do zmiennej.

Mixins (mieszanki)

Możemy też stworzyć tzw. mixins dzięki którym możemy w jednym elemencie dziedziczyć style z innego. Załóżmy że mamy taką klasę CSS do obramowania:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

I chcemy ją użyć kilka razy w stylach, np w linkach w menu oraz w linkach w postach. Zamiast dodawać klasę bordered do tagów html możemy wykorzystać mixtures:

#menu a { 
  color: #111; 
  .bordered(); 
} 
.post a { 
  color: red; 
  .bordered(); 
}

Zagnieżdżanie (nesting)

Dzięki LESS możemy także w prosty sposób zagnieżdżać style CSS. Dla przykładu zamiast kodu:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

Możemy w LESS napisać po prostu:

#header { 
  color: black; 
  .navigation { 
    font-size: 12px; 
  } 
  .logo { 
    width: 300px; 
  } 
}

To są tylko niektóre z wielu charakterystyk LESS. O wszystkich nich możesz się dowiedzieć z dokumentacji pod adresen http://lesscss.org/

Kompilacja do CSS

Jak już wspomnieliśmy przeglądarki nie potrafią czytać kodu LESS, dlatego też należy go skompilować do CSS. Czyli plik LESS ze stylami przekonwertować na nowy plik CSS. Jeśli tworzysz projekt w jakimś frameworku JavaScript jak np. React, Angular, Ember, Vue to całkiem możliwe, że już masz tam zainstalowany kompilator.

Możesz też go używać poprzez linie poleceń, informacje znajdziesz pod adresem http://lesscss.org/usage/#command-line-usage

Ja tylko wspomnę jak można wykonać kompilację bezpośrednio przeglądarce. Oczywiście na wersji produkcyjnej powinieneś użyć kompilatorów z linii poleceń, żeby niepotrzebnie nie ładować tej biblioteki JS, ale dla testów lub nauki możesz użyć kompilatora w przeglądarce.

W tym celu w sekcji HEAD strony umieść kod:

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.12.2/less.min.js"></script>

A następnie dołączasz swoje style LESS np:

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

Podsumowanie

Ten artykuł nie miał na celu pokazania wszystkich możliwości LESS. To jest tylko krótkie wprowadzenie aby pokazać, że naprawdę warto używać preprocesorów CSS – ułatwiają one organizację kodu, a także go mumifikują dzięki czemu takie pliki zajmują mniej miejsca i strona szybciej się wczytuje. Obecnie są też alternatywy do LESS takie jak np. SASS. Jak chcesz to możesz się podzielic w komentarzach co o nich sądzisz.