Czym jest LESS?

Wprowadzenie

Less jest to nic innego jak dynamiczny arkusz stylów udoskonalony o pewne funkcjonalności takie jak zmienne,importowanie plików, tworzenie zagnieżdżeń, możliwość tworzenia działań arytmetycznych na stylach, z którym „współpracują” strony internetowe.
Jest to język, który nie wymaga żadnego specjalnego oprogramowania, wystarczy najzwyczajniejszy edytor tekstu, który obsługuje rozszerzenia .less np.sublime text, webstorm, ..+ kompilator Winless, który możecie pobrać ze strony: http://winless.org/

Kompilator będzie nam potrzebny do przetransformowania pliku .less na .css, ponieważ przeglądarka nie jest w stanie czytać stylów z pliku less.

Sama obsługa kompilatora jest prosta, poniżej przedstawię wam jak wygląda proces zamiany pliku .less na plik .css oraz, jak można wykorzystać potencjał Less. To do dzieła 🙂

Zmienne w Less – Praktycznie

Krok 1. Tworzymy nowy dokument HTML (index.html) i dodajemy nowy akapit z klasą Akapit1, jeżeli nie wiesz jak stworzyć nowy dokument HTML zapraszam do zapoznania się z artykułem: Artykuł HTML .

Krok 2. Tworzymy nowy plik .less, klikamy 'nowy plik’, nazywamy go style i zapisujemy go z rozszerzeniem .less → style.less. W tym momencie mamy już nowy plik less, w którym możemy pisać nasze style.

Napiszemy 3 zmienna, które będą odpowiadać za kolor, wielkość czcionki, odstęp między literami. Wielką zaletą takiego podejścia jest, możliwość błyskawicznej zmiany wartości dla wielu elementów wykorzystujących takie same zmienne. Struktura takiej zmiennej wygląda następująco:
@Nazwa_zmiennej:wartość;
No to zaczynajmy! 🙂

Teraz mając zmienne możemy je przypisać do klasy naszego akapitu:

Krok 3. Przejdźmy do naszego kompilatora (winless) i przetransformujmy nasz plik less do css.

1. Otwieramy program WinLess.exe

2. Klikamy 'Add folder’ znajdujący się w lewym dolnym rogu programu i wybieramy folder w którym znajduje się nasz plik Less wraz z plikiem HTML.

Program powinien nam sam automatycznie znaleźć pliki less, jeżeli się tak nie stanie klikamy na przycisk 'Refresh folder’ w prawym dolnym rogu programu.

Po chwili widzimy wszystkie pliki less jakie posiadamy w tym katalogu, co ciekawe, możemy je od razu minifikować, czyli pozbyć się wszystkich spacji,enterów,wolnych przestrzeni w pliku. Ma to swoje plusy i minusy, plusem jest zdecydowanie waga takiego pliku a minusem, że w momencie modyfikacji pliku Css (nie używając Lessa) ciężej jest się odnaleźć w kodzie.

My zminifikujemy nasz plik w celach naukowych, zatem zostawiamy zaznaczony przycisk 'Minify’ . Aby skompilować plik klikamy przycisk 'Compile’ w prawym dolnym rogu programu.

Teraz powinien zostać utworzony automatycznie nowy plik Css o nazwie Style.css, który wygląda następująco:

Jak widzimy cała kompilacja przeszła prawidłowo i w miejscach naszych zmiennych pojawiły się wartości im przypisane.

Teraz czas na podłączenie naszego pliku Css do strony internetowej. Wchodzimy w nasz plik index.html, w sekcji Nasz Index wygląda następująco:

Zagnieżdżanie w Less – Praktycznie

Wielką zaletą Less jest jego podejście co do zagnieżdżania elementów. W tej części artykułu chcę wam przedstawić różnicę między zagnieżdżaniem w czystym Css a Less.

Przyjmijmy że mamy taką strukturę Diva:

Aby odwołać się do akapitu z klasą 'Logo’ stosujemy:
Czysty Css: .glowny .menu .kolumna1 . Logo{Wartosci;}
Less:

Jak widzimy struktura Less jest zdecydowanie bardziej przyjazna jeżeli chodzi manipulowaniem stylami na odpowiednich poziomach. Efekty Czystego Css i Less jest identyczny tak naprawdę, wszystko to kwestia jak bardzo chcemy mieć przejrzysty kod.

Pamiętaj

Jeżeli pracujemy w Less to wszystkie zmiany dokonujemy w pliku less i ponownie kompilujemy, Nie należy części kodu pisać w czystym Css a drugiej części w Less, spowoduje to że podczas kompilacji Less zostaną nadpisane wszystkie style pisane w czystym Css tego pliku.

A teraz jeśli chcesz jeszcze chłonąć wiedzę, zapraszam do przeczytania artykułu pod tytułem: Tag blink html.