Изучаем LESS: Миксины

Изучаем LESS: Миксины

От автора: итак, мы продолжаем наше знакомство с LESS и сегодня рассмотрим такой мощный компонент, как миксины LESS.

Давайте узнаем, что же такое миксины LESS и как их использовать.

Что такое миксины?

Миксины (англ. mixins) в LESS – это, главным образом, сгруппированный набор свойств CSS, которые могут быть вложены в различные селекторы LESS. Это как переменная с несколькими разными свойствами.

Есть идеи насчет того, где их можно применить? [Ответ. CSS3.] Вы будете поражены тем, насколько широкие возможно дают нам миксины, так как в нашем распоряжении есть и Миксины и Миксины с параметрами, которые могут принимать переменные. Вы также можете смешивать миксины. И да, я считаю это предложение грамматически правильным.

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Для этого мы создадим три класса: класс serif, класс sans-serif и класс monospace. Кроме того, в этом примере я добавлю две переменные, которые мы рассмотрели во второй части этой серии. Давайте взглянем на код.

// Переменные
@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;
}

Как видите, мы задаем размер шрифта и высоту строки, используя указанные нами переменные, которые не требуют объяснения. Потом мы задаем шрифт, просто обращаясь к классу 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;
}

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

Миксины с параметрами

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

Это – идеальный вариант, когда вы работаете со свойствами 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;
}

Заключение

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

Автор: Alex Ball

Источник: http://www.developerdrive.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree