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.).
