Саша Бизиков

Руководитель отдела дизайна в ФанБоксе

Эффективное использование 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

В Coach View среды IBM Process Designer 8.5 взаимодействие с переменными происходит через JavaScript, который разделён на блоки. Есть основной блок и блоки, код в которых выполняется по соответствующему действию: В данной заметке опишу работу с входящим бизнес объектом (далее БО) и входящими параметрами. Подключение происходит во вкладке «Переменные», в которых можно указать только один

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

Системные файлы в Mac OS X скрыты от пользователей в целях безопасности. Это правильно, но иногда бывают ситуации, когда система принимает пользовательские файлы за системные и тоже скрывает их. Например, файл .htaccess, необходимый для настройки локального сервера, будет скрыт. Для того, чтобы показать системные файлы, необходимо выполнить в Терминале команду: defaults write com.apple.finder AppleShowAllFiles -bool

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

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

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

У Google есть хороший сервис: PageSpeed Insights, который подскажет, что необходимо оптимизировать у вас на сайте. Одним из советов является включение gzip сжатия на хостинге (или сервере), где размещается ваш сайт. Описывать, зачем нужно ускорять загрузку своего сайта, думаю, нет необходимости. Для включения gzip сжатия необходимо иметь работающий сайт на php и хостинг или сервер,

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

С выходом Android 5.0 мобильный браузер Chrome начал поддерживать метатег theme-color. Для примера сделаем верхнюю панель красной: <meta name=»theme-color» content=»red»> Мобильный браузер Firefox в Firefox OS, начиная с версии 2.1, тоже поддерживает этот метатег. С выходом альфа-версии Яндекс.Браузера появились новые возможности для манипулирования внешним видом браузера. Можно задавать свои стили для верхней и нижней панелей браузера

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

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

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

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

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

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

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

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

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

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

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

Тема давно не новая, но все все равно не могу обойти стороной такую замечательную функцию GitHub.com, как генератор статических страниц. Суть заключается в том, что создавая репозиторий на GitHub, можно разместить исходники статического сайта и показывать их как сайт. Эта функция будет полезна для тех, кому нужно где то разместить простенький сайт или сайт-визитку и

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

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

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

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

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

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

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

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

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

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