Pierwsze kroki z Less.js

Tworzenie aplikacji internetowych prowadzi nas wieloma ścieżkami, ale wszystkie te ścieżki mają jedną wspólną cechę: kod HTML i kod CSS, co daje nam wiele możliwości, aby nasze aplikacje wyglądały tak, jak chcemy lub tak jak sobie wyobrażamy.
To, co się teraz dzieje, to fakt, że ponieważ każda osoba ma swój sposób rozwoju, wiele razy powstałe kody są bardzo obszerne lub nieco niechlujne, co powoduje niewielki wpływ na konserwację i wydajność. W tym miejscu pojawiają się biblioteki i preprocesory, które pomagają nam napisać nieco czystszy i bardziej wydajny kod, pomagając w ten sposób również w pracy zespołowej, ponieważ wiele z tych bibliotek pozwala nam pisać lepszy kod.
Less.jsNazwa Less.js pochodzi z połączenia słów Lepszy CSS, coś jak CSS cieńszy lub zredukowany, co już daje nam wyobrażenie o tym, co ten preprocesor zamierza zrobić, co jest niczym innym jak pomaganiem nam w pisaniu mniej kodu CSS, poprawiając w ten sposób czytelność i wydajność naszych aplikacji i stron internetowych. Opiera się na JavaScript więc możemy z niego korzystać albo po stronie klienta, choć ta praktyka nie jest zalecana dla produkcji, albo też po stronie serwera dzięki npm i Node.js, więc może stać się wtyczką niektórych Framework JavaScript którą w tej chwili jedziemy.
Główna idea do przyjęcia Less.js w naszym środowisku programistycznym jest pomoc w spełnieniu zasady SUCHY, co oznacza nie powtarzanie się i osiągnięcie tego Less.js zawiera funkcje, klasy i zmienne, które umożliwiają nam pisanie kodu wielokrotnego użytku niż ten, w którym byśmy pisali CSS bezpośrednio.
1- Potrzebujemy nowoczesnej przeglądarki, która potrafi zinterpretować przykłady, z którymi będziemy mieli do czynienia, może być Google Chrome lub Firefox Developer Edition.
2- Musimy mieć edytor tekstu w stylu przez Sublime Text lub NotePad++, aby móc wygodniej pisać nasze przykłady.
3- Na koniec potrzebujemy uprawnień do instalowania elementów za pomocą konsoli poleceń i połączenia internetowego, aby pobrać niezbędne zasoby.
InstalacjaInstalacja Less.js Można to zrobić na dwa sposoby, pierwszy bezpośrednio na poziomie klienta, a drugi w środowisku serwerowym, takim jak Node.jsZobaczmy każdy z tych sposobów poniżej.
Ta forma instalacji jest tak prosta, jak po prostu wywołanie pliku zawierającego bibliotekę Less.jsi jest po prostu już w naszym środowisku. Aby pobrać bibliotekę, wystarczy wejść na lesscss.org i pobrać najnowszą stabilną wersję.

POWIĘKSZAĆ

Gdy już mamy pobrany plik, możemy przejść do stworzenia małego przykładu, który pomoże nam dowiedzieć się, czy nasze środowisko jest gotowe do programowania za pomocą Less.js, dlatego musimy wykonać następujące czynności:
1- Zamierzamy stworzyć folder, a wewnątrz plik o nazwie index.html, wtedy znajdziemy plik less.min.js wewnątrz folderu odległość wersji Less.js które pobraliśmy, dodatkowo stworzymy plik o nazwie style.mniej, struktura tego, co opisaliśmy, powinna wyglądać tak, jak widzimy poniżej:

2- Następnie napiszemy poniższy kod w naszym index.html abyśmy mieli coś, co możemy zastosować CSS a więc sprawdź style:

 Pierwsze kroki z Less.js Nasz nagłówek Treść Nasza stopka

Tutaj widzimy przede wszystkim strukturę HTML podstawowe, gdzie w obrębie ciało umieściliśmy etykietę nagłówek, etykieta Sekcja i wreszcie etykieta stopka, daje nam to trzy zupełnie różne elementy, do których możemy zastosować style CSS.
3- Teraz wewnątrz etykiety głowa z poprzedniego kodu zamierzamy włączyć nasz plik style.mniej a po tym załączeniu plik less.js, w tym miejscu bardzo ważne jest podkreślenie, że less.js zawsze będzie dołączany po naszych plikach .mniej że style będą nosić, i ważne jest również, aby pamiętać, że pliki .mniej które uwzględniamy musi mieć atrybut rel następująco: rel = "arkusz stylów / mniej" ponieważ bez tego kompilator mniej nie będą wiedzieć, że muszą pracować z tym plikiem. Zobaczmy jak będzie wyglądał nasz tag head z dodatkowym kodem dodanym do kodu z poprzedniego kroku:

 Pierwsze kroki z Less.js 

4- Teraz musimy tylko dodać kilka stylów CSS wewnątrz pliku style.mniej, poniższy kod rozróżnia różne tworzone przez nas etykiety różnymi kolorami:

 header {color: blue;} section {color: gray;} footer {color: yellow;}

5- Jeśli otworzymy nasze index.html za pomocą przeglądarki zobaczymy, jak zmienił się styl, a jeśli otworzymy konsolę programisty, zobaczymy wyświetlane przez nią komunikaty less.js Aby dać nam znać, że to działa, zobaczmy na poniższym obrazku, jak to wygląda:

Możemy nawet wykonać trochę bardziej dogłębne ćwiczenie i otworzyć kod źródłowy naszego przykładu w przeglądarce i zobaczyć jak less.js wygenerował kod CSS w naszym dokumencie nie uwzględniamy:

Po stronie serweraInstalacja po stronie klienta jest bardzo przydatna, gdy się rozwijamy, ponieważ pozwala nam na coś w rodzaju odpluskwić w czasie rzeczywistym, obserwując w ten sposób zmiany w danym momencie, jednak dla środowiska produkcyjnego nie jest to w ogóle zalecane, w pierwszej kolejności marnujemy czas Less.js generuje arkusze stylów, a po drugie dlatego, że wgrywamy nasze pliki .mniej które mogą być kopiowane przez inne osoby. Dlatego teraz zobaczymy, jak pracować z Less.js podczas instalacji kompilatora użyjemy do tego menedżera pakietów npm.
Musimy mieć instancję funkcjonalny npm, dlatego zalecamy zainstalowanie najnowszej wersji Node.js dla naszego systemu operacyjnego.
Potrzebujemy również wystarczających uprawnień, aby móc instalować pakiety za pomocą npm, a do wykonywania instrukcji na poziomie konsoli poleceń jest to bardzo ważne, szczególnie w środowiskach Linux Tak Prochowiec, aby w Okna pozwolenia są łatwiejsze do przetworzenia na tym poziomie.
1- Z konsoli poleceń musimy wykonać następującą instrukcję za pomocą npm:

 npm zainstalować -g mniej

2- Poprzedni krok zmusił nas do zainstalowania kompilatora Less.js, zwany mniejc, to co robi, to przekształca nasz kod mniej w poprawnym kodzie CSS do użycia w przeglądarce, więc zamierzamy go przetestować, w tym celu stworzymy plik o nazwie przykład.mniej z następującym kodem w środku:

 @color: blue; .highlight () {color: @color;} p {.highlight ();}

3- Po wykonaniu powyższych czynności przechodzimy do naszej konsoli i wykonujemy poniższą instrukcję, aby wygenerować plik .css gdzie spocznie nasz skompilowany kod:

 lessc przykład.less> przykład.css

W naszym wynikowym pliku otrzymamy to, co widzimy na poniższym obrazku:

Jeśli chcemy skompresowany wynik lub zminimalizowane po prostu dodaj -x parametr po zadzwonieniu mniejc jak następujące:

 lessc -x przykład.less> przykład.css

Co daje nam następujące? zminimalizowane css w rezultacie:

W ostatnim przykładzie instalacji według sposobu użytkowania widzieliśmy, że aby umieścić kolor na prostej etykiecie P robimy kilka rzeczy, najpierw definiujemy zmienną koloru za pomocą @ modyfikator, oznacza to, że możemy wywoływać kolory lub wartości w zmiennych w całym naszym dokumencie, więc możemy mieć zmienną @kolorTitle i dzięki temu wiemy, że gdziekolwiek chcemy użyć koloru tytułowego, wykonujemy tylko to wywołanie.
Procedury wielokrotnego użytkuInną rzeczą, którą widzieliśmy było to, że stworzyliśmy funkcję o nazwie .podświetl () a w środku umieszczamy atrybut CSS a jego wartością była nasza zmienna, jest to kolejny przykład tego, jak możemy zbudować procedury wielokrotnego użytku w naszych stylach, więc w każdej klasie lub atrybucie, który chcemy wyróżnić, musimy po prostu wywołać tę funkcję, tak jak to zrobiliśmy wewnątrz elementu p w przykład.
Widzimy zatem, że znaczenie Less.js jest to, że pomaga nam myśleć więcej o tym, jak zrobić mniej, a tym samym uzyskać na końcu skompresowany, poprawny i łatwy do odczytania kod, w przykładzie można by było powiedzieć, że dużo zostało napisane za tak mało CSS wynik, ale chodzi o to, że kiedy musimy zrobić dużo CSS, piszemy mniej, więc widzimy, że Less.js okazuje się, że tworzymy duże arkusze stylów.
Na tym kończymy ten samouczek, nauczyliśmy się stawiać pierwsze kroki z Less.js, więc teraz mamy dobre narzędzia, aby móc tworzyć świetne aplikacje lub strony internetowe przy użyciu jak najmniejszej ilości kodu.