Какво е Less CSS и как го използвате?

Ако сте опитен разработчик на CSS, ще сте добре запознати с недостатъците на езика. Все още липсва широко разпространена поддръжка за отдавна изисквани функции като влагане и миксини.

Less (Leaner Style Sheets) е разширение на CSS с много мощни функции. Ако знаете CSS, тогава изучаването на Less е лесно, защото синтаксисът на Less е много подобен.

Как да инсталирате Less

Можете да инсталирате Less с JavaScript Package Manager, NPM като тичам:

npm инсталирайте по-малко -g

След инсталирането можете да компилирате .по-малко файлове към .css използвайки по-малко команда. Например следната команда се компилира стил.по-малко и извежда резултатите в a style.css файл.

по-малко стил.по-малко стил.css

Променливи в Less

За разлика от обикновен CSS, който използва оператора "--" за дефиниране на променливи, Less дефинира променливи с помощта на символа "@". Например:

@ширина:40px;
@височина:80 пиксела;

Кодовият блок просто създава две променливи, ширина и височина, които съдържат съответно две стойности: 40px и 80px. Обичайна практика е да се вземат често използвани стойности в CSS и да се съхраняват в променлива. Това улеснява модифицирането на тези стойности, тъй като има само един източник на контрол.

Ето как можете да използвате променливи в Less. Създайте index.htm файл и добавете следния шаблонен код:

html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8">
<метаhttp-еквив=„X-UA-съвместим“съдържание="IE=ръб">
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0">
<връзкаотн="стилов лист"href="style.css">
<заглавие>Използване на по-малко CSSзаглавие>
глава>
<тяло>
<див>
 Здравейте от децата на планетата Земя!
див>
тяло>
html>

След това създайте a стил.по-малко файл и добавете следното:

@ширина:400 пиксела;
@височина:400 пиксела;
@vertical-center: център;
@txt-бяло: бяло;
@bg-red: rgb(220, 11, 11);
@font-40:40px;
див {
ширина: @ширина;
височина: @височина;
дисплей: гъвкав;
цвят: @txt-бял;
Цвят на фона: @bg-red;
размер на шрифта: @font-40;
}

Сега, когато можете да компилирате .по-малко файл към .css използвайки по-малко команда:

по-малко стил.по-малко стил.css

Компилираният CSS трябва да изглежда така:

див {
ширина: 400px;
височина: 400px;
дисплей: flex;
цвят: бяло;
Цвят на фона: #dc0b0b;
размер на шрифта: 40px;
}

Когато отворите браузъра си, трябва да видите това:

Има много повече неща, които можете да правите с променливи в Less, като интерполация, която ви позволява да използвате променливи като имена на селектори, URL адреси и др. Ето пример за това как да приложите интерполация на променливи:

@custom-selector: контейнер;
.@{custom-selector} {
подплата: 10px;
марж: 10px;
граница: твърдо 10px;
}

Кодовият блок по-горе използва @{...} клауза за използване на променлива като селектор. Когато бъде компилиран, кодът ще доведе до следното:

.контейнер{
подплата: 10px;
марж: 10px;
граница: твърдо 10px;
}

Аритметични операции в Less

Less също така осигурява поддръжка за аритметични операции като събиране, изваждане, деление и умножение. Тези операции работят с константи, стойности и променливи.

@променлива-1:5px;
// Операция за умножение между променлива и константа
@променлива-2:@променлива-1 * 2
// Операция на събиране между стойност и променлива.
@променлива-3:10px + @променлива-2

Как да използвате Mixins

Mixins ви позволява да използвате повторно стилове (или CSS код) в целия лист със стилове. други CSS разширения като Sass предлагат и Mixins. За да илюстрирате как миксините работят в Less, създайте index.htm и добавете следния код:

html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8">
<метаhttp-еквив=„X-UA-съвместим“съдържание="IE=ръб">
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0">
<връзкаотн="стилов лист"href="style.css">
<заглавие>Използване на по-малко CSSзаглавие>
глава>
<тяло>
<див>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Солута
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 долорум! Voluptate quos autem culpa et sit, acceptenda reiciendis
 facilis unde sequi.
див>
<стр>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Солута
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 долорум! Voluptate quos autem culpa et sit, acceptenda reiciendis
 facilis unde sequi.
стр>
<стр>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Солута
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 долорум! Voluptate quos autem culpa et sit, acceptenda reiciendis
 facilis unde sequi.
стр>
тяло>
html>

След това създайте a стил.по-малко файл и добавете следните редове:

.примерен текст() {
Цвят на фона: жълто;
}
.първа буква() {
Цвят на фона: червен;
цвят: бяло;
размер на шрифта: 30px;
}
стр {
.примерен текст();
}
стр::първа буква {
.първа буква();
}

В кодовия блок по-горе има два класа миксин: .примерен текст и .първа буква. Когато искате да използвате миксин в друга част от листа със стилове, просто го препратете по име със скоби в края: .mixin(). В браузъра трябва да видите нещо подобно:

Стил вложен в Less

Да приемем, че имате родителски div с два елемента като негови деца: a стр елемент и друг див. Обикновено, ако искате да стилизирате стр елемент с червения цвят и див елементи със зелен цвят, можете да използвате следния подход:

дивстр {
цвят: червен;
}
див {
цвят: зелено
}

Less предоставя подобна функционалност чрез използването на гнездене. Така че в този случай по-малкият еквивалент на кодовия блок по-горе ще бъде:

див {
цвят: зелено;
стр {
цвят: червен;
 }
}

Не само, че това е по-лесно за обгръщане, но също така прави кода по-лесен за поддръжка. Обръщането към родителски селектори с по-малко е по-лесно с & оператор. Например:

бутон {
Цвят на фона: син;
граница: нито един;
&:задръжте {
Цвят на фона: сив;
трансформирам: мащаб(1.2);
 }
}

Кодовият блок по-горе ще доведе до следния CSS код, когато бъде компилиран:

бутон {
Цвят на фона: син;
граница: нито един;
}
бутон:задръжте {
Цвят на фона: сиво;
трансформирам: мащаб(1.2);
}

Разбиране на обхвата и функциите в Less

Подобно на обикновените езици за програмиране, променливите имат обхвата на блока, в който ги дефинирате. За да илюстрирате това, създайте нов index.htm файл и добавете първия HTML шаблонен код, предоставен по-рано. След това добавете следния блок в тяло таг:

<дивклас="външен-div">
 Външният Div трябва да е червен.
<бр />
<педяклас="вътрешен-div">
 Вътрешният div трябва да е зелен.
педя>
див>

В стил.по-малко файл, добавете следните редове:

@bg-color: червен;
тяло {
размер на шрифта: 40px;
цвят: бяло;
марж: 20px;
}
.inner-div {
@bg-color: зелено;
Цвят на фона: @bg-color;
}
.outer-div {
Цвят на фона: @bg-color;
}

The вътрешен разд блок предефинира бг-цвят променлива, обхващаща само този блок. Така че зеленият цвят се прилага само за този клас и не засяга глобалния бг-цвят променлива. Когато компилирате и отворите резултата в браузъра, трябва да видите това:

Less също предоставя удобни функции, които могат да бъдат полезни в някои сценарии. Например, ако искате да зададете стил само ако е изпълнено определено условие, можете да направите това с ако функция. Тази функция има следния синтаксис:

ако((условие), стойност1, стойност2)

Кодът се връща стойност1 ако условието е изпълнено и стойност2 в противен случай. Ето един пример:

@var1:20px;
@var2:20px;
див {
подплата: ако((@var1 = @var2), 10px, 20px);
}

Кодовият блок по-горе трябва да доведе до следния CSS, когато се компилира:

див {
подплата: 10px;
}

Правете повече с по-малко и други CSS разширения

Хиляди разработчици използват Less, за да направят писането на CSS малко приятно. Невероятни функции като функции, миксини и променливи са само малка част от това, което Less предлага.

Less е подходящ както за малки, така и за големи проекти. Струва си да се отбележи, че други също толкова невероятни езици за разширения на CSS като Sass и Stylus CSS си струва да се проверят.