LESS i mixin z czym to się je ;)

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/

Dobra lecimy dalej, tworzymy sobie:

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

Teraz jeśli chcemy w jakimś elemencie dodać zaokrąglenia to dodajemy:

#nav {
  .rounded-corners;
}

Po wygenerowaniu dostajemy:

#nav {
 -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Czyż nie jest to szybszy sposób, można go wykorzystać wielokrotnie 🙂

Można oczywiście zmienną (@radius: 5px) nadpisać, powiedzmy że chcemy mieć radius na 15px - nic prostszego.

#nav {
  .rounded-corners(15px);
}

Po wygenerowaniu dostajemy:

#nav {
 -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
}

Jest wiele fajnych innych własności, mnożenie itd.

@base-color: #111;
#nav {
  color: (@base-color * 3);
}

Po wygenerowaniu otrzymujemy:

#nav {
  color: #333;
}

Inny przykład wykorzystania less, zwykłe #nav w #head gdzie posiadamy menu składające się z ul li oraz elementów a:

#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}

Nic prostszego, w LESS będzie to miało taką strukturę:

# header {
  #nav {
    ul {
      li {
        a {}
      }
    }
  }
}