Mniej znaczy więcej czyli kilka słów o {LESS}

Mniej znaczy więcej – co za tym się kryje? Tym razem będzie kilka zdań na temat jednego popularnego preprocesora CSS czyli LESS (https://lesscss.org/)

Chcąc wykorzystać LESS na stronie umieszczamy w jej kodzie poniższą linijkę (zazwyczaj w <header>) po odwołanu się do pliku z definicją styli.

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

W rezultacie to co mamy umieścić w kodzie strony wygląda następująco.

<link rel="stylesheet/less" href="css/style.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

W pliku style.less umieszczamy nasze deklaracje wykorzystujące polecenia less co po kompilacji (co może zachodzić w locie, przy ładowaniu strony gdy używamy powyższego skryptu less.min.js lub przy użyciu zewnętrznego kompilatora) doprowadza do stworzenia pliku definicji stylów *.css

Co dzięki Less zyskujemy? Np. możliwość korzystania ze zmiennych, dzięki którym zamiast x razy wpisywać ten sam kod koloru możemy załatwić to nazwą zmiennej, której wartość deklarujemy tylko raz (to taka trochę „stała” zmienna) a potem w szablonie LESS odwołujemy się do tej zmiennej tyle razy ile chcemy. No a gdy przyjdzie nam ochota to nie musimy wyszukiwać wszystkich wystąpień danego koloru a jedynie zmieniamy wartość zmiennej.

@bgcolor: #FFFF00;

div {
    background-color: @bgcolor;
}

W rezultacie mamy normalny CSS:

div {
  background-color: #FF0000;
}

To powyższe nie jest zbyt dużym „szaleństwem” więc jeśli LESS ma się do czegoś nadać to musi oferować coś więcej. No i coś takiego jest. Owo „coś” to np. „mixinis”. Czym to się je? Mixins to fragmenty kodu, które mogą być dodane do naszego pliku *.less i zawierają powtarzalne definicje stylów. Przykładowo umieśćmy w pliku *.less taką klasę (definicję stylu), która będzie przypisana do wielu elementów (można też użyć #id w miejsce klasy):

.border_top_bottom {
    border-top: 1px dashed #000;
    border-bottom: 5px solid yellow;
}

Przypisanie powyższego:

#contentTop {
    .border_top_bottom;
}
#contentMain {

}
#contentBottom {
    .border_top_bottom;
}

No a w wyniku kompilacji less->css otrzymujemy:

.border_top_bottom {
  border-top: 1px dashed #000;
  border-bottom: 5px solid yellow;
}
#contentTop {
  border-top: 1px dashed #000;
  border-bottom: 5px solid yellow;
}
#contentBottom {
  border-top: 1px dashed #000;
  border-bottom: 5px solid yellow;
}

Tak na marginesie dodam to, że w przypadku edytora Sublime możemy ułatwić sobie pracę instalując odpowiednie dodatki. Jednym z nich jest Less2Css, który wymaga zainstalowania w Windows lessc (https://github.com/duncansmart/less.js-windows) oraz dodania do zmiennej systemowej PATH ścieżki do folderu zawierającego lessc.cmd (w zależności od miejsca gdzie umieścimy rozpakowaną zawartość archiwum *.zip). W ustawieniach konfiguracyjnych wtyczki (Preferences -> Package Settings -> Less2Css -> Settings User) wpisujemy to co potrzebne nam (np. to czy ma być kompilacja automatyczna z pliku *.less do pliku *.css, czy plik wyjściowy ma być zminimalizowany, jaka ma być nazwa pliku wynikowego itd.).

 

Avatar

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;).

Dodaj komentarz