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, то просьба поделиться ими в комментариях.


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