Najpierw co to jest LESS, w skrócie taki podrasowany css 🙂
Powiedzmy że chcemy dodać w kilku elementach border, kod dla kilku przeglądarek musimy wyglądać tak:
#jakisDiv {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
Trochę to męczące jeśli musimy to robić w olbrzymim projekcie, kopiować za każdym razem gdzie chcemy użyć border-radius. Tutaj właśnie przychodzi nam LESS
Najpierw tworzę sobie plik style.less w którym inkluduję inne pliki less.
Wygląda to mniej-więcej tak:
@include mixin.less; // plik w którym trzymam wszystkie potrzebne kody do wygenerowania border-radius, gradientów itd.
@include reset.less;
@include nax.less;
...
LESS nie jest obsługiwanym standardem przez przeglądarki więc potrzebny nam jest CSS, ja używam Intellij IDEA gdzie ma plugin który mi generuje czystego cssa, w pracy zaś less jest generowany do postaci css po stronie serwera, można także użyć javascript więcej na http://lesscss.org/