обработка данных

Нажмите сюда, если долго загружается,
либо "ESC" - отмена
 
Заказ обратного звонка
Заказать звонок
Наш специалист свяжется с Вами и ответит на все вопросы
Обработка данных
Наш специалист свяжется с Вами и ответит на все вопросы.
OK

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

Источник: https://habrahabr.ru
Время чтения: ~3 мин
5 возможностей LESS, о которых вы могли не знать
Статьи
661
Логотип LESS
При разработке интерфейсов я уделяю значительное время работе со стилями, написанными на LESS или SCSS. И часто я замечаю, что разработчики используют только ограниченный набор возможностей препроцессора. В этой статье я хочу рассказать о тех возможностях препроцессора LESS, которые редко используются, но при этом могут значительно упростить написание стилей.
Функция data-uri
Часто бывает удобно включить внешний файл, например, иконку, непосредственно в стили с помощью схемы data:URI. Плюсы такого способа всем известны и я не буду их перечислять. Есть множество способов преобразовать файл в данный формат: это онлайн-конвертеры, плагины для Grunt и Gulp, модуль для Node.js и даже консольная утилита. Однако в LESS уже встроена функция для такого преобразования, поэтому нет необходимости дополнительно что-то настраивать.

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

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

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

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

LESS
CODE
CSS
CODE
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Подписка на новости. Получайте важное первым
ПОДПИСАТЬСЯ