Саша Бизиков

В Москве на самоизоляции

Эффективное использование mixin в LESS

Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS. В этой записи пойдет речь о Mixin. О том, что это такое, я уже писал в одной из предыдущих записей про LESS.

Для меня использование CSS3 уже не является каким-то ноу-хау. За пару лет практически во всех (пламенный привет IE) браузерах внедрили поддержку, если не всех, то очень многих свойств, присутствующих в CSS3.

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

Градиент

Задаем линейный градиент для элемента:

.gradient(@from: #000, @to: #fff) { background-color: @from; background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background-image: -webkit-linear-gradient(top, @from, @to); background-image: -moz-linear-gradient(top, @from, @to); background-image: -o-linear-gradient(top, @from, @to); background-image: linear-gradient(to bottom, @from, @to);}/* Пример использования */@color: #E0F8D8;.element{ /* Фон с градиентом цвета от #E0F8D8 и до #9BE882 */ .gradient(@color, darken(@color,20%));}

Box-shadow

Добавляем тень к элементу. Добавлять тень можно внешнюю и внутреннюю. Если @insert задать значение true, то элементу задается внутреняя тень.

/* Внутреняя тень */.box-shadow(@insert, @x: 0, @y: 0, @blur: 10px, @color: #666) when (@insert = true) { -webkit-box-shadow: inset @x @y @blur @color; box-shadow: inset @x @y @blur @color;}/* Внешняя тень */.box-shadow(@insert, @x: 0, @y: 0, @blur: 10px, @color: #666) when (@insert = false) { -webkit-box-shadow: @x @y @blur @color; box-shadow: @x @y @blur @color;}/* Упрощенный вариант использования внейшей тени */.box-shadow(@x: 0, @y: 0, @blur: 10px, @color: #666){ -webkit-box-shadow: @arguments; box-shadow: @arguments;}/* Пример использования *//* Внутреняя тень */.element{ .box-shadow(false, 2px, 2px, 20px, #999);}/* Если не указать @insert, то сгенерируется внешняя тень */.element{ .box-shadow(1px, 2px, 20px, #000);}

Text-shadow

Добавляем тень к тексту:

.text-shadow(@x: 1px, @y: 1px, @radius: 2px, @color: #000){ -webkit-text-shadow: @arguments; -moz-text-shadow: @arguments; text-shadow: @arguments;}/* Пример использования */.element{ .text-shadow;}

Border-radius

Задаем радиус скругления элемента:

.border-radius(@r: 3px) { -webkit-border-radius: @r; -moz-border-radius: @r; border-radius: @r;}/* Пример использования */.element{ .border-radius(10px);}

Column

@count — определяет количество колонок в многоколоночном тексте, а @gap задаёт расстояние между колонками.

.column(@count: 3, @gap: 1em) { -webkit-column-count: @count; -webkit-column-gap: @gap; -moz-column-count: @count; -moz-column-gap: @gap; column-count: @count; column-gap: @gap;}/* Пример использования */.element{ /* Текст будет разбит на две колонки, отступ между ними будет составлять 1.8em */ .column(2, 1.8em);}

Transition

Устанавливаем эффект перехода между двумя состояниями элемента (например обычным состоянием и :hover):

.transition(@property: all, @duration: 0.3s, @function: linear) { -webkit-transition: @arguments; -moz-transition: @arguments; -o-transition: @arguments; transition: @arguments;}/* пример использования */a { color: #008dd2; text-decoration: none; .transition(color, 0.2s, linear); &:hover { text-decoration: none; color: #1a171b; }}

Transform

Трансформируем элемент, в частности, можем его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

.transform(@value) { -webkit-transform: @value; -moz-transform: @value; -ms-transform: @value; -o-transform: @value; transform: @value;}/* Пример использования *//* Увеличим элемент в два раза */.element{ .transform(scale(2,2));}/* Изменение элемента при наведении */.element{ /* Для плавности добавим .transition */ .transition; &:hover{ .transform(scale(2,2)); }}/* Необходимо при наведении не только увеличить элемент, но и повернуть его на 10 градусов? Легко!*/.element{ .transition; &:hover{ .transform(rotate(10deg) scale(2,2)); /* (!) Запятую между функциями ставить не нужно */ }}

Opacity

Задаем прозрачность элементу:

.opacity (@opacity: 0.5) { 
 -webkit-opacity: @opacity; 
 -moz-opacity: @opacity; 
 opacity: @opacity;
}
/* 
 Пример использования
 При наведении элемент становится прозрачным 
*/
.element { 
 .opacity(1); 
 &:hover{ 
 .opacity(0.8) 
 }
}

Box sizing

Свойство применяется для изменения алгоритма расчета ширины и высоты элемента.

.box-sizing (@type: border-box) {
    -webkit-box-sizing: @type;
    -moz-box-sizing: @type;
    box-sizing: @type;
}

Не обязательно использовать все миксины в одном проекте, достаточно добавить в LESS-файл только те, которые вам точно пригодятся. Для удобства список всех миксинов вынес в mixin.less.

Приятой верстки!

, ,

Веду аудиодневник с наблюдениями на темы дизайна, саморазвития и в целом, отношения к жизни.

В третьем сезоне учусь рассказывать истории, разбираюсь в том, что такое счастье и ищу умиротворения. Когда сам не могу разобраться в теме, то зову эксперта. Подписывайтесь на подкаст, чтобы не пропустить новые выпуски.

3 комментария

  1. Дмитрий

    Всё, что тут написано, достигается использованием банального autoprefixer, миксины для этого не нужны.

    • Александр Бизиков

      Верно. Когда заметка была написана, о PostCSS и autoprefixer не знал.

    • Игорь Косолапов

      А если используется виртуальный хостинт и на нем нет возможности установить систему сборки и соответственно PostCSS с расширением autoprefixer… Или есть какое-то решение без установки системы сборки, типа Gulp и т.п.?

Написать комментарий

Ещё заметки

Прошёл курс «iOS-программирование для дизайнеров»

С 4 по 13 июля я проходил «iOS-программирование для дизайнеров» — это курс для дизайнеров, которые хотят разобраться в том, из чего состоит разработка мобильного приложения для айфона. В заметке рассказываю, чему научился.

С чего начать изучение вёрстки

Отвечаю на вопрос читателя о том, с чего начать изучение вёрстки.

Правильный перенос сайта Вордпрес на новый домен

Рассказываю как правильно перенести сайт на WordPress на новый домен с помощью Search Replace DB.

Перенос записей в WordPress

В заметке рассмотрим как перенести большое количество записей в формате CSV на WordPress. Решение подойдёт даже для случая больше 100 000 записей.

Двухфакторная аутентификация в WordPress

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

Что выбрать: Jekyll или WordPress?

Целый год мой блог работал на Jekyll и размещался на GitHub. Месяц назад вернулся обратно к WordPress и в заметке расскажу почему.

IBM Process Designer 8.5: чтение и запись данных в Coach View

Показать скрытые файлы в Mac OS X

Как перевести тему WordPress на русский язык

В большинстве тем для WordPress присутствует папка languages, которая позволяет перевести на необходимый язык весь её интерфейс. Перевод заключается в редактировании .po-файла. В заметке рассказываю как перевести тему WordPress на русский язык.

Оптимизация сайта: включаем gzip-сжатие

Меняем фон верхней панели браузера

Страница в Sharepoint 2013 c областями для веб-частей

Мне тут по работе довелось верстать под Sharepoint 2013. Многие вещи оказались для меня далеко не тривиальными. Поэтому свой опыт хочу задокументировать в виде статьи, где опишу процесс создания .aspx-страницы с зонами для вставки веб-частей.

Система сеток с использованием LESS

В этой заметке пойдет речь о примере использования LESS с целью упрощения верстки проектов.

Полезные ресурсы по Sharepoint

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

Работаем с куками через JavaScript

Рассказываю как записывать и считывать значения из куки.

Что такое LESS и как его использовать

Коротко рассказываю о том, что такое LESS и как его использовать.

Бесплатный хостинг на Гитхаб

Перенос Вордпрес на новый домен

Описываю как правильно выполнить перенос сайта на WordPress.

Установка и настройка Git

Описываю по шагам как установить Git к себе на компьютер.

Отключить топик-ссылки и фотосеты в LiveStreet

При создании сайта на CMS LiveStreet часто приходится производить много настроек. Например, иногда полезно отключить некоторые виды постов. В заметке привожу пример кода, отключающий некоторые виды постов.

Настройка виртуального сервера для работы с LiveStreet

Мне необходимо было перейти на выделенный сервер, где будет работать сайт на LiveStreet. Настраивал сервер впервые, узнал много нового. В заметке опишу основные этапы настройки.

Настройка файла .htaccess после установки LiveStreet

Решение ошибки когда главная страница работает, а при переходе на любую другую — получаю 404 ошибку.