Co to jest Less CSS i jak go używać?

Jeśli jesteś doświadczonym programistą CSS, doskonale znasz wady tego języka. Nadal brakuje szerokiego wsparcia dla długo oczekiwanych funkcji, takich jak zagnieżdżanie i domieszki.

Less (Leaner Style Sheets) to rozszerzenie CSS z wieloma potężnymi funkcjami. Jeśli znasz CSS, nauka Less jest łatwa, ponieważ składnia Less jest bardzo podobna.

Jak zainstalować mniej

Możesz zainstalować Less z Menedżer pakietów JavaScript, NPM biegiem:

npm zainstaluj mniej -g

Po instalacji możesz skompilować .mniej pliki do .css używając mniej Komenda. Na przykład następujące polecenie kompiluje bezszyjkowy i wyprowadza wyniki w formacie a styl.css plik.

mniej stylu. mniej stylu. css

Zmienne w Less

w odróżnieniu zwykły CSS, który używa operatora „--” do definiowania zmiennych, Less definiuje zmienne za pomocą symbolu „@”. Na przykład:

@szerokość:40px;
@wysokość:80px;

Blok kodu po prostu tworzy dwie zmienne, szerokość i wysokość, które przechowują odpowiednio dwie wartości: 40px i 80px. Powszechną praktyką jest pobieranie często używanych wartości w CSS i przechowywanie ich w zmiennej. Ułatwia to modyfikowanie tych wartości, ponieważ istnieje tylko jedno źródło kontroli.

Oto jak możesz używać zmiennych w Less. Stworzyć indeks.htm plik i dodaj następujący kod szablonu:

HTML>
<HTMLlang="pl">
<głowa>
<metazestaw znaków=„UTF-8”>
<metaodpowiednik http=„Zgodny z X-UA”treść=„IE=krawędź”>
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1,0”>
<połączyćrel=„arkusz stylów”href="styl.css">
<tytuł>Używanie mniej CSStytuł>
głowa>
<ciało>
<dz>
 Pozdrowienia od dzieci planety Ziemia!
dz>
ciało>
HTML>

Następnie utwórz plik bezszyjkowy plik i dodaj:

@szerokość:400 pikseli;
@wysokość:400 pikseli;
@pionowe-centrum: Centrum;
@txt-biały: biały;
@bg-czerwony: RGB(220, 11, 11);
@font-40:40px;
dz {
szerokość: @szerokość;
wysokość: @wysokość;
wyświetlacz: przewód;
kolor: @txt-biały;
kolor tła: @bg-czerwony;
rozmiar czcionki: @font-40;
}

Teraz, kiedy możesz skompilować plik .mniej plik do .css używając mniej Komenda:

mniej stylu. mniej stylu. css

Skompilowany CSS powinien wyglądać tak:

dz {
szerokość: 400piks;
wysokość: 400piks;
wyświetlacz: przewód;
kolor: biały;
kolor tła: #dc0b0b;
rozmiar czcionki: 40piks;
}

Po otwarciu przeglądarki powinieneś zobaczyć to:

Ze zmiennymi w Less można zrobić o wiele więcej, na przykład interpolację, która pozwala używać zmiennych jako nazw selektorów, adresów URL i nie tylko. Oto przykład implementacji interpolacji zmiennych:

@selektor-niestandardowy: pojemnik;
.@{selektor-niestandardowy} {
wyściółka: 10 piks;
margines: 10 piks;
granica: solidny 10 piks;
}

Powyższy blok kodu wykorzystuje @{...} klauzula, aby użyć zmiennej jako selektora. Po skompilowaniu kod spowoduje, że:

.pojemnik{
wyściółka: 10piks;
margines: 10piks;
granica: solidny 10piks;
}

Operacje arytmetyczne w Less

Less zapewnia również obsługę operacji arytmetycznych, takich jak dodawanie, odejmowanie, dzielenie i mnożenie. Te operacje działają ze stałymi, wartościami i zmiennymi.

@zmienna-1:5 piks;
// Operacja mnożenia między zmienną a stałą
@zmienna-2:@zmienna-1 * 2
// Operacja dodawania między wartością a zmienną.
@zmienna-3:10 piks + @zmienna-2

Jak korzystać z miksów

Mixins pozwala na ponowne użycie stylów (lub kodu CSS) w całym arkuszu stylów. Inny Rozszerzenia CSS, takie jak Sass oferują również Mixiny. Aby zilustrować działanie miksów w Less, utwórz plik index.htm i dodaj następujący kod:

HTML>
<HTMLlang="pl">
<głowa>
<metazestaw znaków=„UTF-8”>
<metaodpowiednik http=„Zgodny z X-UA”treść=„IE=krawędź”>
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1,0”>
<połączyćrel=„arkusz stylów”href="styl.css">
<tytuł>Używanie mniej CSStytuł>
głowa>
<ciało>
<dz>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 Architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 boleść! Voluptate quos autem culpa et sit, zakładamenda reiciendis
 facilis unde sequi.
dz>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 Architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 boleść! Voluptate quos autem culpa et sit, zakładamenda reiciendis
 facilis unde sequi.
P>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
 Architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 boleść! Voluptate quos autem culpa et sit, zakładamenda reiciendis
 facilis unde sequi.
P>
ciało>
HTML>

Następnie utwórz plik bezszyjkowy plik i dodaj następujące linie:

.przykładowy tekst() {
kolor tła: żółty;
}
.pierwsza litera() {
kolor tła: czerwony;
kolor: biały;
rozmiar czcionki: 30px;
}
P {
.przykładowy tekst();
}
P::pierwsza litera {
.pierwsza litera();
}

W powyższym bloku kodu znajdują się dwie klasy mixin: .przykładowy tekst I .pierwsza litera. Jeśli chcesz użyć domieszki w innej części arkusza stylów, po prostu odwołaj się do niej poprzez nazwę z nawiasami na końcu: .mixin(). W przeglądarce powinieneś zobaczyć coś takiego:

Zagnieżdżanie stylów w Less

Załóżmy, że masz nadrzędny element div z dwoma elementami jako elementami podrzędnymi: a P pierwiastek i drugi dz. Zwykle, jeśli chcesz stylizować plik P element z kolorem czerwonym i dz elementy kolorem zielonym, możesz zastosować następujące podejście:

dzP {
kolor: czerwony;
}
dz {
kolor: zielony
}

Less zapewnia podobną funkcjonalność dzięki zastosowaniu zagnieżdżanie. Tak więc w tym przypadku mniejszym odpowiednikiem powyższego bloku kodu byłoby:

dz {
kolor: zielony;
P {
kolor: czerwony;
 }
}

Nie tylko łatwiej jest to ogarnąć, ale także sprawia, że ​​kod jest łatwiejszy w utrzymaniu. Odwoływanie się do selektorów nadrzędnych z mniejszą liczbą jest łatwiejsze dzięki & operator. Na przykład:

przycisk {
kolor tła: niebieski;
granica: nic;
&:unosić się {
kolor tła: szary;
przekształcać: skala(1.2);
 }
}

Powyższy blok kodu spowoduje po skompilowaniu następujący kod CSS:

przycisk {
kolor tła: niebieski;
granica: nic;
}
przycisk:unosić się {
kolor tła: szary;
przekształcać: skala(1.2);
}

Zrozumienie zakresu i funkcji w Less

Podobnie jak zwykłe języki programowania, zmienne mają zasięg bloku, w którym je definiujesz. Aby to zilustrować, utwórz nowy indeks.htm plik i dodaj pierwszy szablonowy kod HTML podany wcześniej. Następnie dodaj następujący blok w ciało etykietka:

<dzklasa=„dział zewnętrzny”>
 Outer Div powinien być czerwony.
<br />
<Zakresklasa=„dział wewnętrzny”>
 Wewnętrzny div powinien być zielony.
Zakres>
dz>

w bezszyjkowy plik, dodaj następujące wiersze:

@bg-kolor: czerwony;
ciało {
rozmiar czcionki: 40px;
kolor: biały;
margines: 20px;
}
dział wewnętrzny {
@bg-kolor: zielony;
kolor tła: @bg-kolor;
}
dział zewnętrzny {
kolor tła: @bg-kolor;
}

The dział wewnętrzny blok redefiniuje kolor bg zmienna o zasięgu tylko do tego bloku. Tak więc zielony kolor dotyczy tylko tej klasy i nie wpływa na globalną kolor bg zmienny. Po skompilowaniu i otwarciu wyniku w przeglądarce powinieneś zobaczyć to:

Mniej zapewnia również przydatne funkcje, które mogą być korzystne w niektórych scenariuszach. Na przykład, jeśli chcesz ustawić styl tylko wtedy, gdy spełniony jest określony warunek, możesz to zrobić za pomocą Jeśli funkcjonować. Ta funkcja ma następującą składnię:

Jeśli((warunek), wartość1, wartość2)

Kod powraca wartość1 jeśli warunek jest spełniony i wartość2 W przeciwnym razie. Oto przykład:

@var1:20px;
@var2:20px;
dz {
wyściółka: Jeśli((@var1 = @var2), 10 piks, 20px);
}

Powyższy blok kodu powinien po kompilacji dać następujący CSS:

dz {
wyściółka: 10piks;
}

Zrób więcej za mniej i inne rozszerzenia CSS

Tysiące programistów używa Less, aby uczynić pisanie CSS trochę przyjemnym. Niesamowite funkcje, takie jak funkcje, miksy i zmienne, to tylko niewielka część tego, co oferuje Less.

Mniej nadaje się zarówno do małych, jak i dużych projektów. Warto zauważyć, że inne równie niesamowite języki rozszerzeń CSS, takie jak Sass i Stylus CSS, są warte sprawdzenia.