Меньше CSS может сделать язык проще в использовании, с сокращениями синтаксиса и мощными функциями. Узнайте, что Less может сделать для вас.
Если вы опытный разработчик CSS, вы хорошо осведомлены о недостатках языка. Ему по-прежнему не хватает широкой поддержки давно запрошенных функций, таких как вложенность и примеси.
Less (Leaner Style Sheets) — это расширение CSS с множеством мощных функций. Если вы знаете CSS, то изучить Less будет легко, потому что синтаксис Less очень похож.
Как установить меньше
Вы можете установить Less с Менеджер пакетов JavaScript, NPM запустив:
npm установить меньше -g
После установки вы можете скомпилировать .меньше файлы в .css используя менее команда. Например, следующая команда компилируется стиль.less и выводит результаты в стиль.css файл.
меньше стиля.меньше стиля.css
Переменные в Меньше
В отличие от обычный CSS, который использует оператор «--» для определения переменных, Less определяет переменные с помощью символа "@". Например:
@ширина:40 пикселей;
@высота:80 пикселей;
Блок кода просто создает две переменные, ширину и высоту, которые содержат два значения соответственно: 40px и 80px. Обычной практикой является использование часто используемых значений в CSS и сохранение их в переменной. Это упрощает изменение этих значений, поскольку существует только один источник управления.
Вот как вы можете использовать переменные в Less. Создать index.htm файл и добавьте следующий шаблонный код:
HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8">
<метаhttp-эквивалент="X-UA-совместимый"содержание="IE=край">
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0">
<связьотн.="таблица стилей"href="стиль.css">
<заголовок>Использование меньшего количества CSSзаголовок>
голова>
<тело>
<див>
Привет от детей планеты Земля!
див>
тело>
HTML>
Далее создайте стиль.less файл и добавьте следующее:
@ширина:400 пикселей;
@высота:400 пикселей;
@вертикальный центр: центр;
@txt-белый: белый;
@bg-красный: RGB(220, 11, 11);
@ шрифт-40:40 пикселей;
див {
ширина: @ширина;
высота: @высота;
отображать: гибкий;
цвет: @txt-белый;
фоновый цвет: @bg-красный;
размер шрифта: @шрифт-40;
}
Теперь, когда вы можете скомпилировать .меньше файл в .css используя менее команда:
меньше стиля.меньше стиля.css
Скомпилированный CSS должен выглядеть так:
див {
ширина: 400пикс.;
высота: 400пикс.;
отображать: сгибаться;
цвет: белый;
фоновый цвет: #dc0b0b;
размер шрифта: 40пикс.;
}
Открыв браузер, вы должны увидеть следующее:
С переменными в Less можно делать гораздо больше, например интерполяцию, которая позволяет использовать переменные в качестве имен селекторов, URL-адресов и т. д. Вот пример того, как реализовать интерполяцию переменных:
@пользовательский-селектор: контейнер;
.@{пользовательский-селектор} {
набивка: 10 пикселей;
допуск: 10 пикселей;
граница: твердый 10 пикселей;
}
В приведенном выше блоке кода используется @{...} предложение для использования переменной в качестве селектора. При компиляции код выдаст следующее:
.контейнер{
набивка: 10пикс.;
допуск: 10пикс.;
граница: твердый 10пикс.;
}
Арифметические операции в Less
Less также обеспечивает поддержку арифметических операций, таких как сложение, вычитание, деление и умножение. Эти операции работают с константами, значениями и переменными.
@переменная-1:5 пикселей;// Операция умножения между переменной и константой
@переменная-2:@переменная-1 * 2
// Операция сложения между значением и переменной.
@переменная-3:10 пикселей + @переменная-2
Как использовать миксины
Миксины позволяют повторно использовать стили (или код CSS) во всей таблице стилей. Другой Расширения CSS, такие как Sass также предлагаем Mixins. Чтобы проиллюстрировать, как миксины работают в Less, создайте index.htm и добавьте следующий код:
HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8">
<метаhttp-эквивалент="X-UA-совместимый"содержание="IE=край">
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0">
<связьотн.="таблица стилей"href="стиль.css">
<заголовок>Использование меньшего количества CSSзаголовок>
голова>
<тело>
<див>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Солюта
archito repudiandae ipsum animi velit id iste dolore reprehenderit
долорум! Voluptate quos autem culpa et sit, acceptnda reiciendis
facilis unde sequi.
див>
<п>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Солюта
archito repudiandae ipsum animi velit id iste dolore reprehenderit
долорум! Voluptate quos autem culpa et sit, acceptnda reiciendis
facilis unde sequi.
п>
<п>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Солюта
archito repudiandae ipsum animi velit id iste dolore reprehenderit
долорум! Voluptate quos autem culpa et sit, acceptnda reiciendis
facilis unde sequi.
п>
тело>
HTML>
Далее создайте стиль.less файл и добавьте следующие строки:
.Образец текста() {
фоновый цвет: желтый;
}.первое письмо() {
фоновый цвет: красный;
цвет: белый;
размер шрифта: 30 пикселей;
}п {
.Образец текста();
}
п::первое письмо {
.первое письмо();
}
В приведенном выше блоке кода есть два класса миксинов: .Образец текста и .первое письмо. Если вы хотите использовать миксин в другой части таблицы стилей, просто укажите его по имени со скобками в конце: .миксин(). В браузере вы должны увидеть что-то вроде этого:
Вложение стилей в Less
Допустим, у вас есть родительский div с двумя дочерними элементами: п элемент и другое див. Обычно, если вы хотите стилизовать п элемент красного цвета и див элементы зеленого цвета, вы можете использовать следующий подход:
дивп {
цвет: красный;
}
див {
цвет: зеленый
}
Less обеспечивает аналогичную функциональность за счет использования гнездование. Таким образом, в этом случае Less-эквивалент приведенного выше блока кода будет таким:
див {
цвет: зеленый;
п {
цвет: красный;
}
}
Это не только упрощает понимание, но и делает код более удобным для сопровождения. Ссылаться на родительские селекторы с помощью less проще с помощью & оператор. Например:
кнопка {
фоновый цвет: синий;
граница: никто;
&:наведите {
фоновый цвет: серый;
трансформировать: шкала(1.2);
}
}
Блок кода выше приведет к следующему коду CSS при компиляции:
кнопка {
фоновый цвет: синий;
граница: никто;
}
кнопка:наведите {
фоновый цвет: серый;
трансформировать: шкала(1.2);
}
Понимание области действия и функций в Less
Как и обычные языки программирования, переменные имеют область действия блока, в котором вы их определяете. Чтобы проиллюстрировать это, создайте новый index.htm файл и добавьте первый шаблонный HTML-код, предоставленный ранее. Затем добавьте следующий блок в тело ярлык:
<дивсорт="внешний div">
Внешний Div должен быть красным.
<бр />
<охватыватьсорт="внутренний div">
Внутренний div должен быть зеленым.
охватывать>
див>
в стиль.less файл, добавьте следующие строки:
@bg-цвет: красный;тело {
размер шрифта: 40 пикселей;
цвет: белый;
допуск: 20 пикселей;
}.inner-div {
@bg-цвет: зеленый;
фоновый цвет: @bg-цвет;
}
.outer-div {
фоновый цвет: @bg-цвет;
}
внутренний отдел блок переопределяет bg-цвет переменная, ограниченная только этим блоком. Таким образом, зеленый цвет применяется только к этому классу и не влияет на глобальный. bg-цвет переменная. Когда вы скомпилируете и откроете результат в браузере, вы должны увидеть следующее:
Less также предоставляет удобные функции, которые могут быть полезны в некоторых сценариях. Например, если вы хотите установить стиль только при выполнении определенного условия, вы можете сделать это с помощью кнопки если функция. Эта функция имеет следующий синтаксис:
если((условие), значение1, значение2)
Код возвращает значение1 если условие выполнено и значение2 в противном случае. Вот пример:
@var1:20 пикселей;
@var2:20 пикселей;
див {
набивка: если((@var1 = @var2), 10 пикселей, 20 пикселей);
}
Блок кода выше должен привести к следующему CSS после компиляции:
див {
набивка: 10пикс.;
}Делайте больше с меньшими затратами и другие расширения CSS
Тысячи разработчиков используют Less, чтобы сделать написание CSS более приятным. Удивительные функции, такие как функции, примеси и переменные, — это лишь малая часть того, что предлагает Less.
Less подходит как для небольших, так и для крупных проектов. Стоит отметить, что другие не менее удивительные языки расширений CSS, такие как Sass и Stylus CSS, заслуживают внимания.