5 возможностей LESS, о которых вы могли не знать

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

Функция data-uri

Часто бывает удобно включить внешний файл, например, иконку, непосредственно в стили с помощью схемы data:URI. Плюсы такого способа всем известны и я не буду их перечислять. Есть множество способов преобразовать файл в данный формат: это онлайн-конвертеры, плагины для Grunt и Gulp, модуль для Node.js и даже консольная утилита. Однако в LESS уже встроена функция для такого преобразования, поэтому нет необходимости дополнительно что-то настраивать.

LESS

.icon-add {
    background-image: data-uri("../icons/add.svg");
}

CSS

.icon-add {
    background-image: url("data:image/svg+xml,...");
}

Функции image-width и image-height

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

LESS

.logo {
    width: image-width("../images/logo.png");
    height: image-height("../images/logo.png");
}

CSS

.logo {
    width: 198px;
    height: 125px;
}

Функции для смешивания цветов

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

Между тем в LESS есть встроенные функции для смешивания цветов, причем режимы наложения полностью совпадают с теми, которые используются в графическом редакторе Photoshop. Все что остается сделать разработчику – это перенести настройки слоя вручную или с помощью Avocode.

LESS

.link {
    color: fadeout(multiply(#ff6600, #999999), 20%);
}

CSS

.link {
    color: rgba(153, 61, 0, 0.8);
}

Псевдокласс extend

Думаю многие из вас использовали миксины, они позволяют использовать общие стили в нескольких местах, но у них есть один минус – дублирование результирующего CSS кода. Данного недостатка можно избежать если вместо миксинов использовать псевдокласс extend, он позволяет унаследовать стили без их дублирования.

LESS

.message {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.message-success {
    &:extend(.message);
    background-color: #dff0d8;
}

.message-info {
    &:extend(.message);
    background-color: #d9edf7;
}

CSS

.message,
.message-success,
.message-info {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.message-success {
    background-color: #dff0d8;
}

.message-info {
    background-color: #d9edf7;
}

Объединение множественных CSS-свойств

Я заметил, что в дизайне все чаще используется такой прием оформления, как множественные тени. Например, у элемента есть внутренняя тень, а при наведении на него добавляется внешняя. В этом случае внутренняя тень будет задаваться в CSS дважды: для обычного состояния и для hover. Однако этого можно избежать, если использовать возможность объединения значений множественных свойств с помощью символа +.

LESS

.button {
    box-shadow+: inset 0 0 10px #555;
}

.button:hover {
    .button;
    box-shadow+: 0 0 20px #000;
}

CSS

.button {
    box-shadow: inset 0 0 10px #555;
}

.button:hover {
    box-shadow: inset 0 0 10px #555, 0 0 20px #000;
}

Если вы знаете другие редко используемые возможности LESS, то просьба поделиться ими в комментариях.

Спасибо за внимание.