LESS is the best

Pewnie jestem ostatnim w sieci, który w końcu spróbował stworzyć swój CSS z wykorzystaniem LESS, szkoda, że dopiero teraz tego spróbowałem!

Liczę na to, że jest jeszcze partu takich ludzi jak ja, piszę więc ten post by ich przekonać do LESS, bo naprawdę warto. Zaoszczędzi to zarówno czas, jak i pomoże tworzyć bardziej modułowe CSSy z możliwością ich konfiguracji.

Zaznaczam tutaj, że guru od CSS nie jestem, nie lubię w nim pisać i babrzę się tylko w nim, kiedy to konieczne – projekt tego wymaga, lub zmiana jest na tyle mała, że mogę ją samemu poprawić. Oczywiście to trwa, jest meczące i testowanie tego to już w ogóle dla mnie paranoja.

LESS zaś daje mi możliwości, odpowiednich skrótów, dzięki czemu pewne rzeczy pisze mi się łatwiej i bardziej przejrzyściej niż CSS – co nie oznacza, że LESS pomoże wam stać się guru CSS! Oj nie :) do tego trzeba się jednak trochę CSS nauczyć.

CSS to LESS, LESS to nie CSS

Zależność pomiędzy LESS i CSS, jest dość prosta, mianowicie to co mamy w CSS jest w pełni poprawnym LESS. Czyli jeżeli swój własny kod CSS wgramy go do pliku .less i przekompilujemy otrzymamy taki sam output.

Pod tym względem wszystko jest proste.

Jednak LESS daje nam dodatkowe możliwości, dzięki czemu pewne rzeczy możemy ukróci, przyspieszyć jak i z automatyzować.

Na przykład taki o to kod LESS:

p {
   font-size: 14px;
    a {
        font-size: 10px;
        color: red;
    }
}

Wygeneruje nam coś takiego w CSS:

p {
   font-size: 14px;
}

p a {
    font-size: 10px;
    color: red;
}

Jak widzicie, zagnieździliśmy nasze tagi za pomocą {} i tab/spacji, w wynikiem zaś jest coś co normalnie byśmy napisali w CSS. Zaoszczędziliśmy paręnaście kliknięć w klawiaturę, co w ciągu dnia daje nam minuty. Bardziej zaawansowanym przykładem może być input z focusem:

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {

	padding: 8px;
                // pozostale globalne wartosci
	&:focus {
		background: @input-background-focus;
	}
}

to co widzicie powyżej wygeneruje wam dwa takie same bloki, z tą różnicą iż drugi blog po [] będzie miał dodane :focus. Proste i super przyjemne.

LESSowanie się – czyli zajawki

Zmienne

Wyżej podałem przykład zagnieżdżania, ale to nie wszystko. LESS umożliwia nam ustawienie parametru i wykorzystywanie go w każdym z możliwych miejsc, na przykład w pliku var.less możemy zdefiniować sobie kolory do wykorzystania na stronie a następnie wykonać następujący kod:

@import "var.less"

p {
    color: @font-color;
}

I dostać coś takiego:

p {
    color: #666;
}

Pomyślcie tylko o tym ile razy musicie kopiować ten sam kolor, a czy ten hex nie był ebebeb czy może byc ececec? I tego typu pytania po protu idą w niepamięć. A potem jego zamiana… a co jak mieliście dwa razy taki sam kolor, ale chcecie tylko zmienić kolor czcionki a drugi pozostawić? Masakra! find-replace już tak pięknie nie zadziała.

mixins

To nic innego jak zbiór własności, który może być wykorzystany w innym miejscu w kodzie, nie koniecznie musi przyjmować parametr, ale może. Mixins może też być nasza istniejąca klasa CSS (to uważam za super sprawę). Dla przykładu, definiujemy sobie klasę określającą kolor przycisku oraz klasę określającą długość przycisku:

.przycisk {
    background-color: black;
}

.dlugi {
    width: 300px;
}

Jeżeli teraz chcemy mieć klasę .nasz-przycisk, który, będzie miał kolor zgodny z klasą .przycisk oraz długość taką jak .dlugi wystarczy, że napiszemy:

.nasz-przycisk {

     .przycisk;
     .dlugi;

}

Super nie? A do tego można zarówno zrobić tak by klasa .przycisk nie była wyrzucana do CSS, wystarczy dodać do niej () i koniec, od tej pory kompilator, nie zamieni jej na klasę CSSową.

Czy to wszystko?

Nie, ale nie widzę sensu przepisywać dokumentacji, która zarówno dostępna jest po angielsku jak i po polsku. To co podałem wyżej powinno was zachęcić chociażby do jego wypróbowania.

Teraz zaś, kiedy wsparcie narzędzi, umożliwia nam pisanie kodu LESS w VS i kompilacje go na przyciśnięcie Save (jak i jego minification), naprawdę, żal nie spróbować. Ja się zakochałem w ciągu kilkunastu minut, i do CSS po prostu nie chce mi się już wracać :)