Less CSS: Введение и учебник

Каждый, кто хочет программировать или разрабатывать современные веб-сайты, не сможет обойтись без CSS. Язык таблиц стилей, как и HTML, является одним из основных языков Всемирной паутины и позволяет четко отделить содержание сайта от его графического представления. Это позволяет в любое время корректировать такие параметры, как макет, цвета или типографику, без необходимости полностью переделывать исходный код. Эта информация о дизайне хранится в таблицах стилей на основе CSS. Однако чем крупнее веб-проект, тем сложнее и запутаннее становятся таблицы стилей, а значит, тем сложнее работать с этим веб-языком. Здесь на помощь приходит CSS-препроцессор Less.

Содержание

Что такое Less?
Less против CSS: Чем они отличаются?
Как использовать Less на клиентах и серверах
Less CSS: Использование на клиентах
Использование Less CSS на серверах
Учебник по Less: Основные возможности Less с примерами
Переменные
Миксины
Вложенность
Операторы
Функции
Меньше CSS: Меньше работы, больше возможностей

Что такое Less?

Less (Leaner Style Sheets) — это обратно совместимое расширение языка или препроцессор для языка таблиц стилей CSS. Это означает, что любой код CSS также автоматически является корректным кодом Less (но это не так в другом направлении). Цель Less — сделать написание CSS-кода более эффективным. Таким образом, язык, на который повлиял SASS, предлагает ряд дополнений к стандартным инструкциям CSS, включая переменные и функции, которые, например, позволяют упростить таблицы стилей и устранить необходимость утомительного дублирования кода.

В целях защиты вашей конфиденциальности видео не будет загружаться, пока вы не нажмете на него.

Когда Алексис Селье выпустил препроцессор CSS в 2009 году, компилятор для преобразования Less в CSS все еще был написан на объектно-ориентированном языке программирования Ruby. Однако теперь основу языка таблиц стилей и процесса компиляции составляет JavaScript-инструмент Less.js — с тем преимуществом, что Less можно компилировать не только на стороне сервера, но и на стороне клиента (в веб-браузерах).

Less против CSS: Чем они отличаются?

И CSS, и Less считаются языками таблиц стилей. Это, следовательно, формальные языки, определяющие внешний вид пользовательских интерфейсов и документов. Файлы таблиц стилей, содержащие желаемые инструкции по оформлению, нужно просто назначить HTML-элементам веб-сайта, а браузер позаботится об интерпретации. Ключевое различие между Less и CSS заключается в том, что CSS является статическим языком, в то время как Less относится к динамическим языкам и поэтому предлагает динамические возможности, такие как переменные, операторы, функции, миксины и вложенность, которые недоступны в CSS.

В то время как инструкции в CSS должны следовать фиксированной схеме, Less открывает перед разработчиками значительно более гибкие возможности: Например, отдельные правила могут быть определены для любого класса элементов во всей таблице стилей, что делает ненужным утомительное повторение кода. Как следствие, синтаксис этих двух языков также различается. Синтаксис Less можно классифицировать как метасинтаксис CSS, поскольку правильный код CSS всегда является правильным кодом Less с той же семантикой.

Как использовать Less на клиентах и серверах

Если вы хотите использовать Less в своем проекте, у вас есть два варианта: Вы можете либо использовать веб-браузер по вашему выбору для компиляции таблиц стилей Less на стороне клиента через Less.js, либо установить приложение JavaScript на свой компьютер для разработки и преобразовать ваш код там с помощью Less.js и среды выполнения JavaScript Node.js через командную строку.

Less CSS: Использование на клиентах

Использование Less на клиенте — самый простой и быстрый способ работы с языком таблиц стилей. Но этот метод не рекомендуется для последующей работы в реальном окружении, поскольку дополнительная компиляция Less в CSS приведет к явным недостаткам производительности для доступа пользователей. Более того, браузеры с отключенным JavaScript полностью проигнорировали бы инструкции по проектированию.

Чтобы скомпилировать Less в браузере, сначала укажите в соответствующем документе, что вы хотите использовать таблицы стилей Less (т.е. таблицы стилей с окончанием файла .less). Просто интегрируйте их с помощью атрибута rel «stylesheet/less»:

<link rel="stylesheet/less" type="text/css" href="styles.less">

Затем загрузите текущую версию Less.js — ее можно найти, например, в официальном репозитории GitHub для препроцессора CSS. Затем вы можете интегрировать инструмент JavaScript в раздел <head> вашего проекта:

<script src="less.js" type="text/javascript"></script>

Примечание

Важно сначала интегрировать таблицу стилей, а затем скрипт. В противном случае вы можете столкнуться с проблемами обработки.

Использование Less CSS на серверах

Less также быстро устанавливается и легко выполняется на компьютерах разработчиков. Здесь у вас есть свободный выбор в отношении операционной системы: Препроцессор CSS работает на Windows, macOS и UNIX/Linux. Однако вышеупомянутая среда выполнения JavaScript Node.js должна быть установлена.

Начните с загрузки актуальной версии для вашей системы с сайта Node.js и ее установки. Используя npm — менеджер пакетов для среды выполнения JavaScript — вы должны затем установить язык стилей через командную строку:

npm install -g less

Теперь вы можете компилировать готовые таблицы стилей Less в любое время — в том числе и через командную строку. Например, файл примера example.less может быть преобразован в файл CSS с помощью следующей команды:

lessc example.less example.css

Учебник по Less: Основные возможности Less с примерами

Всем, кто регулярно работает с CSS, стоит познакомиться с Less. Использование Less дает не только преимущество в виде возможности включения динамического поведения в код таблицы стилей, но и возможность сэкономить время и усилия. Здесь, однако, важно ознакомиться с тем, как работает расширение CSS. В конце концов, чтобы писать таблицы стилей на Less, необходимо знать необходимые правила синтаксиса. Используя практические примеры Less CSS, наш краткий учебник по Less познакомит вас с наиболее важными функциями, включая соответствующие обозначения.

Переменные

Одной из самых сильных сторон Less является возможность — как и в других языках программирования — создавать переменные. Они могут хранить любые типы значений и особенно важны для значений, которые вы часто используете в таблице стилей: Например, переменные часто используются для централизованного определения цветов, шрифтов, размеров (размер, высота и ширина), селекторов или URL, а также их вариаций (например, светлее/темнее). Определенные значения затем могут быть использованы в любом месте таблицы стилей, что позволяет реализовать глобальные изменения с помощью всего одной строки кода.

Следующие выдержки кода определяют две переменные в качестве примера — одну для цвета фона (@background-color) и одну для цвета текста (@text-color). Обе переменные содержат шестнадцатеричные коды:

// Less
@background-color: #ffffff;
@text-color: #000000;
p{
background-color: @background-color;
color: @text-color;
padding: 15px;
}
ul{
background-color: @background-color;
}
li{
color: @text-color;
}

Цвет фона — в данном случае белый — назначается как обычным текстовым блокам (p), так и неупорядоченным спискам (ul). Черный цвет задается в качестве цвета текста и применяется к тексту в текстовых блоках, а также к элементам списка (li) в списках. Чтобы изменить эти заданные цвета и задать, например, белый текст на черном фоне для списков и текстовых блоков, достаточно поменять значения двух переменных. В стандартном листе CSS эти значения пришлось бы заменять по отдельности для всех элементов. После компиляции в CSS код выглядит следующим образом:

/* CSS */
p{
background-color: #ffffff;
color: #000000;
padding: 15px;
}
ul{
background-color: #ffffff;
}
li{
color: #1A237E;
}

Миксины

Миксины похожи на переменные. Но в этом случае централизованно определяются не отдельные значения, а целые классы и указанные в них значения, чтобы затем в любой момент передать их другим классам в таблице стилей Less. Миксины также могут вести себя как функции и принимать параметры (включая значения по умолчанию). Следующий пример — миксин для закругленных углов (.rounded-corners), который назначается как для заголовка (#header), так и для колонтитула (#footer). В то время как для header принимается указанное значение, #footer присваивает миксину собственное значение (10px):

// Less
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

Скомпилированный CSS для этого кода Less выглядит следующим образом:

/* CSS */
#header {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#footer {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

Вложенность

Чтобы создать наследуемые атрибуты в CSS, необходимо писать длинные и сложные селекторы. В Less вы можете вложить столько селекторов друг в друга, сколько пожелаете. Это облегчает работу, а также создает более четкую и понятную структуру таблицы стилей. Эту особенность препроцессора CSS можно также проиллюстрировать на примере:

// Less
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { 
font-size: 12px;
a { 
text-decoration: none;
&:hover { 
border-width: 1px 
}
}
}
}

Селекторы p, a и :hover здесь объединены в таблицу стилей Less, что значительно упрощает атрибуцию в таблице стилей CSS. Это становится ясно, если посмотреть на сгенерированный CSS для этого примера кода:

/* CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

Операторы

Арифметические операторы сложения (+), вычитания (-), умножения (*) и деления (/) также можно использовать в таблицах стилей Less, применяя соответствующий оператор к любому числу или значению цвета. Это означает, что вы можете легко создавать сложные взаимозависимости между значениями различных элементов, которые сохраняются даже при изменении базовых значений. Если оператор делает преобразование невозможным или неуместным, он автоматически игнорируется — например, если к значению пикселя добавляется значение сантиметра. Следующий пример показывает, как можно использовать операторы в Less:

// Less
@the-border: 1px;
@base-color: #111;
#header {
	color: (@base-color * 3);
	border-left: @the-border;
	border-right: (@the-border * 2);
}
#footer {
	color: (@base-color + #003300);
}

Основные определения для границ (1px) и базового цвета (#111), который соответствует черному, также применяются к заголовку и колонтитулу, при этом три оператора влияют на базовые значения:

В колонтитуле базовый цвет умножается на три. В результате получается шестнадцатеричное значение #333, что соответствует темно-серому цвету.
Правая граница в заголовке получает оператор умножения * 2 и поэтому становится вдвое шире стандартной границы (2px).
Основной цвет нижнего колонтитула также управляется оператором. Здесь шестнадцатеричное значение #003300 добавляется к базовому значению #111, что придает колонтитулу темно-зеленый цвет (#114411).

Впечатляющие результаты можно увидеть и в скомпилированном коде CSS:

/* CSS */
#header {
	color: #333;
	border-left: 1px;
	border-right: 2px;
}
#footer {
	color: #114411;
}

Функции

Less также добавляет в CSS функции, которые предоставляют целый ряд возможностей: Например, вы можете добавить в таблицу стилей Less сложные логические отношения с помощью функции if или Boolean. Или вы можете использовать не менее сложные функции для математических расчетов, таких как косинус, синус и тангенс. С другой стороны, можно использовать базовые функции для быстрого определения цветов (rgb, rgba, hsv и т.д.) или функции для операторов цвета, таких как контраст, насыщенность/десатурация или осветление/затемнение. Например, чтобы увеличить или уменьшить насыщенность элемента, вам понадобится только значение цвета и функция saturate. Указав процент (0-100%), можно также определить степень изменения насыщенности.

// Less
@red: #842210;
#header {
color: saturate(@red, 20%); ->#931801
}
#footer { 
color: desaturate(@red, 10%); ->##7d2717
}

В этом примере темно-красный цвет определен шестнадцатеричным кодом #842210 в таблице стилей Less и введен в качестве цвета для верхнего и нижнего колонтитулов. Но к заголовку должно быть применено увеличение на 20 процентов, в то время как код Less должен уменьшить насыщенность в футере на 10 процентов. В таблице стилей CSS функции и переменная цвета (@red) преобразуются, и поэтому видны только шестнадцатеричные коды с соответствующим уровнем насыщенности:

/* CSS */
#header {
color: #931801
}
#footer { 
color: #7d2717
}

Меньше CSS: Меньше работы, больше возможностей

Это краткое руководство по Less затронуло лишь часть возможностей, которые делают препроцессор CSS таким полезным. Определив переменные, миксины и другие функции, вы можете в любой момент применить их к новым элементам в таблице стилей, не начиная работу с нуля, как это часто бывает с кодом CSS. Если такие значения, как базовый цвет, изменятся, вы сможете легко и без особых усилий скорректировать их в рабочем документе Less — что также делает препроцессор CSS ценным помощником для долгосрочного представления веб-проекта.

Совет

Подробную информацию об отдельных функциях Less можно найти в подробном руководстве на сайте lesscss.org.