LESS – alternatywa dla CSS ?

Demo:
Demo dostępne tutaj

Czy można tworzyć stronę www bez użycia plików css? Owszem można a w obecnych czasach nawet trzeba. A język programowania LESS jest do tego idealny.
Warto tutaj wspomnieć, że metoda pisania less to nic innego jak rozbudowany css. Wiele rzeczy można po prostu napisać szybciej i prościej.
Dodatkowym atutem jest to, że można deklarować zmienne, nawet w różnych plikach i się do nich odnosić. kolejnym udogodnieniem jest możliwość pisania funkcji, również matematycznych, co pozwala na dynamiczne tworzenie elementów strony.

Jak używać styli LESS na stronie ?

Nie działa to tak prosto jak w przypadku plików css. Nie da się w znaczniku head dodać źródła pliku less i będzie działać. Póki co jeszcze przeglądarki tego nie interpretują, ale z czasem pewnie i tak będzie. A więc co potrzeba do działania?

  • Standardowo dopinamy plik ze stylami less, gdzie piszemy nasze style –
    <link rel="stylesheet/less" type="text/css" href="src/less/style.less" /> 
    
  • Oraz dodatkowo poniżej plik js, który interpretuje właśnie style less i pokazuje właściwy kod zrozumiały dla przeglądarek. Do pobrania tutaj

Zmienne LESS

Mając już wszystko przygotowane, możemy zacząć pisać. Zacznijmy od prostych rzeczy, takich jak zmienne.
W łatwy spoób możemy definiować podstawowe zmienne, które później wykorzystujemy na naszej stronie.

@mainColor: #777;
@subColor: #eee;

Dlaczego w ten sposób? Jedna zasadnicza zaleta, gdy po skończeniu tworzenia strony, uznamy jednak, że np ten kolor nie jest taki jakbyśmy chcieli i chcemy go zmienić to w tym przypadku zmieniamy tylko w jednym miejscu.
Inna sprawa to w przypadku, gdy tworzymy szablon z opcją wyboru kilku schematów.
Odnosimy się do tego w ten sposób:

.contener
{
background-color:@mainColor;
}

Manipulowanie zmiennymi

LESS posiada bardzo dobre udogodnienia, gdy chcemy coś zmodyfikować, ale nie w sensie, że dorzucić jeszcze jakieś inne stałe kolory, tylko na bazie jednego lekko go modyfikować. I podobnie ze czcionką, którą mamy bazową wielkość i do niej tworzymy mniejsza i większą.

@mainColor-dark: darken(@mainColor, 15%); //przyciemniamy nasz kolor
@mainColor-light: lighten(@mainColor, 20%);//rozjaśniamy nasz kolor

@font-size-base: 18px;
@font-h1:        floor((@font-size-base * 2.4)); // zaokrąglenie w dół
@font-h2:        ceil((@font-size-base * 2.0)); // zaokrąglenie w górę

Importowanie innego pliku less, np. ze zmiennymi robimy za pomocą:

@import "variable.less";

Struktura kodu

Jak wyżej wspomniałem pisanie kodu w plikach less jest dużo szybsze niż ma to miejsce w css. Posłużę się przykładami, żeby zobrazować działania języka less.
Nasza struktura html wygląda następująco:

<div class="main">
 <div class="top">
  <div class="content">
   <a href="#">LESS i power</a>
  </div>
 </div>
<div class="bottom">
 <ul>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>
</div>

A więc zrobimy sobie proste style napisane w less i dla zobrazowania w css.

@mainWidth: 600px;
@mainColor: #ddd;
@linkColor: #dd0055; 
@hoverColor: #ba074f;
.main
{
width:@mainWidth;
margin:0 auto;
.top
{
.content
{
background-color:@mainColor;
width: @mainWidth / 3;
a
{
 color:@linkColor;
&:hover
{
 color:@hoverColor;
}
}
}
}
.bottom
{
 ul
 {
  margin:0;
  li
  {
   style-type:none;
   margin-right:2px;
   &:last-child
   {
    margin-right:0;
   }
  }
 }
}
}

Dla stylów css trzeba by się trochę napisać z tymi podrzędnymi kategoriami:

.main {
  width: 600px;
  margin: 0 auto;
}
.main .top .content {
  background-color: #ddd;
  width: 200px;
}
.main .top .content a {
  color: #dd0055;
}
.main .top .content a:hover {
  color: #ba074f;
}
.main .bottom ul {
  margin: 0;
}
.main .bottom ul li {
  style-type: none;
  margin-right: 2px;
}
.main .bottom ul li:last-child {
  margin-right: 0;
}

Powyższy przykład jest najprostszy z możliwych. Funkcje, jakie oferuje less są o wiele bardziej skomplikowane i złożone. W przypadku dużych projektów są na pewno dużym ułatwieniem i z czasem stałym elementem każdej strony internetowej.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code