Mixin в LESS бывают разные
23-06-2012Время чтения ~ 6 мин.CSS, HTML, LESS, SASS 35812
Миксы достаточно универсальны. В простом варианте - это готовый набор css-правил. В более сложном случае - это параметизированные примеси, по сути - функции. Для новичков не сразу понятна разница, хотя они имеют принципиальные отличия: первый вариант по сути copy-paste. Второй - функция, принимающая аргументы и имеющая более сложный алогритм вывода.
Рассмотрим основные отличия этих видов.
Copy-Paste
Простые миксы выводятся так, как они заданы.
.border_radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } // используем h1 { .border_radius; }
То есть для H1 пропишется всё, что указано в .border_radius. С практической точки зрения микс предназначен только для быстрой вставки различных «заготовок» css-классов.
Недостатки простых миксов
У таких миксов есть несколько недостатков, один из главных - микс целиком попадает в результирующий css-код. По сути такие миксы равны обычным css-правилам, поэтому компилятор не может их отличить.
Предыдущий пример приведёт вот к такому результату:
.border_radius { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } h1 { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
То есть вначале вывелся сам микс (компилятор посчитал его обычным css-правилом), а после еще раз, но уже как функция-микс.
К счастью проблема решается очень просто - нужно использовать параметизированные примеси, превращаяя «примесь» в аналог функции.
Микс как функция
Чтобы микс стал функцией при его написании нужно указать скобки. Сравним два примера.
.border_radius { border-radius: 5px; } // используем h1 { .border_radius; } // результат .border_radius { border-radius:5px; } h1 { border-radius:5px; }
То есть мы получили и .border_radius и h1. Добавим в микс скобки.
.border_radius() { border-radius: 5px; } // используем h1 { .border_radius; } // результат h1 { border-radius:5px; }
Остался только h1, а класс .border_radius исчез из конечного результата.
Наборы правил для множества тэгов
Пусть у нас есть некий HTML-каркас для какого-либо своего блока шаблона. Это может быть слайдер, меню, виджет или какая-то заготовка из предопределенных тэг.class. При верстке очень часто встречаются такие блоки, где часть css-правил кочует от шаблона к шаблону.
Скажем плагин облака рубрик имеет такие стили:
// plugin CatClouds div.catclouds { text-align: center; span { line-height: 1.4em; } }
Данные правила практически никогда не меняются, но, для правильной работы плагина, необходимы в каждом шаблоне. Таким образом проще всего сделать микс, который и выполнит вставку этих правил.
// микс .mix_catclouds() { text-align: center; span { line-height: 1.4em; } } // используем div.catclouds { .mix_catclouds; }
То есть в миксе можно указывать сколько угодно вложенных правил.
Этот подход можно использовать для решения задач, где есть уже какие-то предопределённые условия. Например можно придумать набор правил для модульной сетки сайта. Мы знаем, что сетка задаётся в main.php и содержит фиксированный HTML для базовых div-блоков. Один микс может выводить сетку для левого сайдбара, второй - правого. Как-то так:
.left_sidebar() { div.content { float: right; } div.sidebar1 { float: left; } } .right_sidebar() { div.content { float: left; } div.sidebar1 { float: right; } } //используем .right_sidebar; // правый // или для левого // .left_sidebar;
Сравнение вёрстки css-фреймворком и less
CSS-фреймворки содержат наборы предопределенных правил. Поэтому, если верстальщик решит использовать фреймворк в своей работе, то ему нужно переделывать HTML-код, прописывая css-классы фреймворка. То есть при использовании любого css-фреймворка верстальщику никуда не отвертеться от того, чтобы лезть в HTML-код и править его под себя.
Удобно ли это? Вряд ли. Тем более, есть такой HTML-код, к которому добраться будет проблематично. Например в MaxSite CMS type-файлы имеют своё именование и каждый раз менять, да еще и поддерживать правки при каждом обновлении системы... Бр-р-р-р-р...
С LESS подход диаметрально противоположный. Есть произвольные HTML-тэги. В less-файле подготавливаются миксы и подставляются под нужный тэг. Нет никакой необходимости лезть в исходные HTML-файлы - вся вёрстка целиком перемещается в less-файл. Удобно? Однозначно!
Миксы в миксах
Это следующий этап, превращающий микс из простой функции в целые классы функций. Вот пример такого микса:
.font() { .verdana() { font-family: Verdana, Arial, Helvetica, sans-serif; } .arial() { font-family: Arial, Helvetica, Verdana, sans-serif; } .georgia() { font-family: Georgia, "Times New Roman", serif; } .times() { font-family: "Times New Roman", Georgia, serif; } }
Видно, что в нём микс в миксе. Для вызова такого микса следует использовать символ « > ».
.font > .arial; .font > .verdana; .font > .times; .font > .georgia;
Удобен данный подход тем, что в миксах можно подготовить самые разные наборы, которые будут логически сгруппированы и удобны для использования (с точки зрения верстальщика, конечно же).
Подобным образом можно сгруппировать и наборы сложных css-правил. Например горизонтальное меню помимо некоего базового комплекта правил, может содержать подмиксы, управляющие цветом только определенной группы: верхние пункты, выпадающие, основной контейнер:
.menu > .base(); .menu > .container(); .menu > .top(); .menu > .down();
Аргументы миксов
Аргументы превращают миксы в полноценные функции. Думаю, нет смысла рассказывать об основах переменных и аргументах, поскольку это азы LESS, но вот остановиться на некоторых нюансах стоит.
Прежде всего нужно учитывать, что агрументы миксов это не просто агрументы, но еще и «переключатели». Возможны ситуации, когда микс не сработает из-за неверно объявленной функции. При этом объявлением микса будет не только его имя (то, что до скобок), но и скобки и их аргументы. То есть одноименных миксов-функций может быть множество!
.color() { color: red; } .color(@a) { color: @a; } .color(@a: green) { color: @a; }
Используем:
h1 { .color; }
Какого цвета будет H1? Зеленый. Потому что получится вот такой css-код:
h1 { color:red; color:green; }
- Первый микс сработал потому что мы вызвали .color без аргументов.
- Второй микс не сработал, потому что при вызове .color должен быть обязательный аргумент, который мы не указали.
- Третий сработал, потому что у микса задан дефолтный аргумент.
h1 { .color(blue); } // результат h1 { color:blue; color:blue; }
Это сработали второй и третий миксы.
Далее. У миксов в аргументах можно не указывать переменные. Это несколько непривычно и называется «совпадение с шаблоном». Например есть два микса .sibebar, один из них размещает сайдбар слева, другой справа.
.sibebar(left) { ... } .sibebar(right) { ... }
Для левого сайдбара используем:
.sibebar(left);
Для правого
.sibebar(right);
В данном примере left и right, переключатели, согласно которым будет срабатывать тот или иной микс. Причем отмечу, что «переключатель» может свободно комбинироваться с другими аргументами, например так:
.sibebar(left, @width: 270px) { ... } // используем .sibebar(left, 250px);
А по-русски можно?
Можно! Об этом знают даже не все опытные верстальщики. В LESS нет жестких правил именования! Посмотрите несколько примеров.
красный() { color: red; } // используем h1 { красный; }
Ещё.
цвет() { красный() { color: red; } синий() { color: blue; } } // используем h1 { цвет > красный; } h2 { цвет > синий; }
А вот с переменными придется задавать строго с @
и по-англиский. Ругается компилятор.
текст() { жирный(@bold: bold) { font-weight: @bold; } цвет(@color){ color: @color; } } // используем h1 { текст > цвет(green); текст > жирный(bold); }
Так что при желании можно верстать и «по-русски». Ну или как минимум убрать ведущие точки в именах миксов.
Бр-р-р-р-р... :)
Статья ОГОНЬ !!!!!!!!!!!!!!