Na pograniczu: LESS CSS

javascript-html5-tutorial.pl

28 grudnia, 2013

Dominik-W

Witam w kolejnym artykule z pogranicza JavaScript i CSS. Dziś krótko o narzędziu Less CSS (tudzież CSS/LESS) – bibliotece stworzonej w JavaScript, mogącej pomóc programiście przy pracy ze stylami CSS.

LESS CSS

Biblioteka ta wprowadza swego rodzaju dynamiczny język arkuszy stylów. LESS rozszerza CSS o elementy dynamicznych języków, takie jak zmienne, funkcje a nawet domieszki (mixins).

Generalnie chodzi o to, aby podobnie jak w językach programowania pisać mniej kodu, a w to miejsce używać takich właśnie elementów jak zmienne i funkcje.

Użycie po stronie klienta

Można wykonać wcześniejszą kompilację (i jest to zalecane w środowisku produkcyjnym). Na potrzeby testów wystarczy interpretacja kodu w przeglądarce.

Nasz kod bazujący na składni LESS umieszczamy w pliku o rozszerzeniu .less, następnie dołączamy go jak zwykły arkusz CSS, z tym że podajemy typ „stylesheet/less” w parametrze rel. Plik(i) .less należy dołączać przed biblioteką (less.js).

Przykład:

&lt;head&gt;
  &lt;link rel=&quot;stylesheet/less&quot; type=&quot;text/css&quot; href=&quot;tests.less&quot;&gt;

  &lt;script src=&quot;less.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

Najprostszy przykład LESS CSS w akcji to zdefiniowanie zmiennej koloru w naszym pliku .less, jak poniżej:


@my_color: #ed0000;

h2 {
  color: @my_color;
}

.myClass {
  width: 100px;
  color: @my_color;
}

Kolor zdefiniowany raz jako nazwana zmienna może być później używany wielokrotnie w kodzie. Zmienną identyfikuje znak @ (przypomina to znak dolara dla zmiennych w PHP).

Domieszki (mixins)

Ciekawym elementem LESS CSS są tzw. domieszki. Jest to sposób na uzyskanie czegoś w rodzaju dziedziczenia. Możliwe jest dzięki temu zawarcie właściwości jednej klasy (CSS) w innej klasie. Takie zachowanie jest podobne do użycia zmiennych, ale dotyczy całych klas.

Ponadto domieszki mogą pobierać argumenty, co podobne jest w działaniu do funkcji.

Przykład – domieszki:

/* LESS */
.rounded-corners (@radius: 6px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#elem1 {
  .rounded-corners;
}

#container {
  .rounded-corners(12px);
}

W .rounded-corners został zdefiniowany argument radius z wartością domyślną (6px). Wartość tego argumentu zostanie podstawiona do zmiennych (promień obramowania elementu CSS). W przypadku elementu mającego ID = container, parametr w momencie wywołania domieszki zostanie nadpisany (12px).

Zagnieżdżone reguły (nested rules)

Mówiąc o dziedziczeniu wypada wspomnieć o regułach zagnieżdżonych. Pozwalają one zagnieżdżać jedne selektory wewnątrz innych, dzięki czemu otrzymujemy bardziej przejrzyste dziedziczenie, krótsze nazwy, brak powielania reguł CSS a tym samym mniejsze arkusze stylów.

Przykład:

/* LESS */
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &amp;:hover { border-width: 1px }
    }
  }
}

Wynik takiej definicji będzie równoważny z następującym kodem CSS:

/* Skompilowany CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Funkcje w LESS CSS

Narzędzie udostępnia programiście także możliwość korzystania z funkcji i operacji. Operacje pozwalają na dodawanie, odejmowanie, dzielenie i mnożenie wartości właściwości oraz kolorów, dając możliwość tworzenia złożonych zależności między właściwościami.

W celach zgodności, operacje powinny wykonywane wewnątrz nawiasów.

Przykład:

/* LESS */

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}

#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

Taki zestaw funkcjonalności udostępnianych przez LESS CSS pozwala kreować coraz bardziej skomplikowane twory na podobieństwo programów. Oczywiście zawsze do pewnego stopnia.

Może to być w każdym razie docenione przez programistów obeznanych z językami programowania typu PHP, JavaScript, itp, pracujących z CSS raczej „dorywczo” (w porównaniu do Frontend Developerów). Taki sposób definiowania stylów CSS może okazać się dla nich bardziej naturalny.

A to najważniejsze, aby sięgać po rozwiązania z którymi pracuje nam się dobrze i które oszczędzają nasz cenny czas.

Podsumowanie

Na koniec zasoby dla dociekliwych:

– strona WWW projektu:

http://lesscss.org/

– Emerald – responsive grid system written in LESS:

http://lmc-eu.github.io/emerald/

– LESS – Tips and Tricks:

http://moduscreate.com/less-tips-tricks/

– więcej przykładów użycia LESS CSS:

http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/

LESS CSS to nie jedyny pre-procesor tego typu, jednak zyskuje na popularności. Coraz częściej można się z nim spotkać w projektach (zwłaszcza w tych nowszych) jak i w ofertach pracy dla programistów związanych z Frontend-em. Z pewnością warto poświęcić kilka chwil na jego opanowanie.