• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ →
Вход
×
или зарегистрироваться

Mixin в LESS бывают разные

CSS, HTML, LESS, SASSПросмотров: 30126Комментарии: 223 июня 2012 г.

Миксы достаточно универсальны. В простом варианте - это готовый набор 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-правилом), а после еще раз, но уже как функция-микс.

Скорее всего такая неопределённость идёт своими корнями к первым версиям LESS, когда о миксах думали только как о примесях (отсюда и слово mixin) - для многократного применения. Это один в один повторяет работу с css-фреймворками с предопределёнными классами и наборами правил. Такой набор есть и в MaxSite CMS 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 {
	цвет > синий;
}

А вот с переменными придется задавать строго с «@» и по-англиский. Ругается компилятор. :blank:

текст() {
	жирный(@bold: bold) {
		font-weight: @bold;
	}
	
	цвет(@color){
		color: @color;
	}
}
 
// используем
h1 {
	текст > цвет(green);
	текст > жирный(bold);
}

Так что при желании можно верстать и «по-русски». :lol: Ну или как минимум убрать ведущие точки в именах миксов. :coolsmirk:


Создание сайтов (Украина) →
Пример создания универсального LESS-микса для табов (вкладок)
Почему нужно изучать LESS
twitter.com facebook.com
Другие записи сайта
База SQLite и основы SQL. Часть 7
База SQLite и основы SQL. Часть 7
Создание telegram-бота
Создание telegram-бота
Шаблон Abstract Factory (Абстрактная фабрика) на PHP
Шаблон Abstract Factory (Абстрактная фабрика) на PHP
Magic Mail Monitor - всегда на связи!
Magic Mail Monitor - всегда на связи!
База SQLite и основы SQL. Часть 6
База SQLite и основы SQL. Часть 6
База SQLite и основы SQL. Часть 5
База SQLite и основы SQL. Часть 5

Комментариев: 2 RSS

1searchingman23-06-2012 21:03

верстать и «по-русски».

Бр-р-р-р-р... :)

2tgk9926-08-2016 07:31

Статья ОГОНЬ !!!!!!!!!!!!!!

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Вот здесь можно заказать создание сайта, шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.3044 | SQL: 20 | Память: 4.63MB | Вход