—»     —»   Изучаем LESS: Mixin'ы
  Раздел: CSS/Style Sheets   Комментариев: 4  

Изучаем LESS: Mixin'ы



Давайте продолжим наше путешествие в недра LESS, и сегодня мы предлагаем вам окунуться в мир миксинов. Если вы не читали первую и вторую части нашего руководства «Изучаем LESS: Введение» и «Изучаем LESS: Использование переменных», то не забудьте ознакомиться с ними прежде, чем приступать к чтению сегодняшней статьи.

Изучаем LESS: Mixin'ы

Итак, перейдем сразу к делу – к mixin’ам (или примесям, миксинам). Сегодня мы расскажем вам о том, что можно сделать с их помощью.

Что такое миксин или примесь?

Миксин в LESS – это обычно группа CSS-параметров, связанных между собой в один, который затем может быть вставлен в переменную других селекторов LESS. Можно сказать, что это нечто вроде переменной, только с несколько иными параметрами.

Есть какие-то мысли по поводу того, где такой элемент может нам пригодиться? (Ответ: CSS3). И вы будете премного удивлены, насколько удобными могут быть миксины, так как у нас есть простые миксины и параметрические миксины, которые могут принимать переменные. Вы даже можете перемешивать примеси с примесями. Все верно, это предложение грамматически правильное.

Итак, начиная работать с основным миксином, давайте разработаем план действий, который вы будете использовать в проекте разработки веб-дизайна. Предположим, что дизайн, который вы разрабатываете, оформлен стандартным шрифтом без засечек в качестве тела документа, и имеет другой шрифт с засечками для оформления заголовков. Вместо того, чтобы прописывать каждый шрифт в отдельный класс (что впоследствии будет очень неудобно, особенно, если в разных заголовках используются разные шрифты), вы можете выставить шрифты внутри миксина, и включить данный класс в другие классы.

Для того чтобы это реализовать, мы создадим 3 класса: класс serif, класс sans-serif и класс monospace. Вдобавок, для наглядности, мы создадим 2 переменные, с которыми мы познакомились в нашем прошлом руководстве. Давайте рассмотрим код.

// Variables
@baseFontSize: 14px;
@baseLineHeight: 21px;

.serif {
font-family: Georgia, 'Times New Roman', serif;
}

.sans-serif {
font-family: Helvetica, Arial, sans-serif;
}

.monospaced {
font-family: 'Courier New', monospace;
}

Все довольно обычно, не правда ли? Кстати, «//» обозначает комментарий в LESS, и не компилируется посредством приложения LESS.app. Стандартные комментарии CSS («/* */) будут компилироваться, но не читаться. Давайте подробнее рассмотрим код миксина.

Возвращаясь к коду, не забудьте обратить внимание на то, как мы форматируем наш тэг параграфа.

p {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.serif;
}

Как вы можете видеть, мы выставили font-size и line-height посредством переменных, которые мы определили, и здесь вроде бы всё само собой разумеется. Далее мы выставляем шрифт, просто вызвав класс serif внутри параметра нашего тэга параграфа. Миксин действует почти так же, как и переменная. Миксин .serif хранит в себе все параметры .serif, и когда он компилируется, все параметры внедряются в параметры параграфа.

Давайте взглянем на скомпилированную версию.

.serif {
font-family: Georgia, 'Times New Roman', serif;
}
.sans-serif {
font-family: Helvetica, Arial, sans-serif;
}
.monospaced {
font-family: 'Courier New', monospace;
}
p {
font-size: 14px;
line-height: 21px;
font-family: Georgia, 'Times New Roman', serif;
}

В виде результата скомпилированного кода LESS мы получаем чистый и понятный код CSS. Что же произойдет, если мы просто сменим .serif на .sans-serif? Наш LESS теперь будет читать это следующим образом:

p {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.sans-serif;
}

И в результате мы получим:

p {
font-size: 14px;
line-height: 21px;
font-family: Helvetica, Arial, sans-serif;
}

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

Parametric Mixins (Параметрические Миксины)

Параметрические миксины почти такие же, как и обычные, но сродни функциям они могут принимать параметры для прикрепления кода внутри миксина. Учитывая это, вы можете выставить параметр в вашем миксине или можете определить переменную внутри вашего параметра для опции по умолчанию.

Это идеально подходит для использования при работе с CSS3-параметрами или когда вам нужно объявить браузерные префиксы, но вы можете использовать эти параметры различными способами. В нашем примере мы используем border-radius. Наш миксин выглядит следующим образом:

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

.sidebar {
.border-radius(4px);
}

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

.sidebar {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

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

.border-radius(@radius: 6px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

.sidebar {
.border-radius;
}

.sidebar2 {
.border-radius(12px);
}

Что в результате дает:

.sidebar {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.sidebar2 {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

Заканчиваем с примесями

Итак, сегодня мы охватили знания о миксинах и параметрических миксинах. Пожалуйста, учтите, что здесь мы рассказали вам обо всем лишь поверхностно. Открывайте редактор кода и попробуйте самостоятельно поэкспериментировать. Дабы превратить ваш процесс разработки в модульный и обеспечить себе возможность повторного использования элементов, попробуйте разработать собственную библиотеку миксинов, которые вы впоследствии сможете использовать в будущих проектах.

Если вы пропустили прошлые части руководства, то обязательно ознакомьтесь с ними. В следующий раз мы расскажем вам о разветвленных правилах! Спасибо за внимание!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 22303   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 31 мая 2012 @ 16:36
Написал: mixermf — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отличная статья! Будем ждать продолжения и полезные примеры использования!=)
Комментарий #2: 14 августа 2012 @ 18:20
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
У вас в статье написано два раза слово "paragraph", может его перевести в "параграф" (только просклонять нужно), а то такое чувство что это значение класса или идентификатора.
Статья очень интересная. Спасибо!
Комментарий #3: 14 августа 2012 @ 19:01
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3303   |   Комментариев: 500
ICQ: --- не указано ---
mrnobody, отредактировано. Спасибо.
Комментарий #4: 11 февраля 2013 @ 13:18
Написал: lexx — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Было бы круто, если можно было переопределять какое-нибудь значение примеси. Например есть два блока с кучей одинаковых свойств, но отличалось бы только одно, например, height. Логично можно было бы использовать примесь, переопределяя его значение height. Такое, в принципе, работает, но некрасиво. В CSS на выходе height дублируется. Сначала одно значение, потом новое.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Полет на флайборде спб
Интересует Полет на флайборде, корпоратив или шоу? Заходите
bezkapitana.ru
Пиломатериалы
База пиломатериалов. ГОСТы на пиломатериалы
erbrus.ru
Шары с логотипом
Блокноты с логотипом. Собственное производство
6417879.ru
Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031