От автора: итак, мы продолжаем наше знакомство с LESS и сегодня рассмотрим такой мощный компонент, как миксины LESS.
Давайте узнаем, что же такое миксины LESS и как их использовать.
Что такое миксины?
Миксины (англ. mixins) в LESS – это, главным образом, сгруппированный набор свойств CSS, которые могут быть вложены в различные селекторы LESS. Это как переменная с несколькими разными свойствами.
Есть идеи насчет того, где их можно применить? [Ответ. CSS3.] Вы будете поражены тем, насколько широкие возможно дают нам миксины, так как в нашем распоряжении есть и Миксины и Миксины с параметрами, которые могут принимать переменные. Вы также можете смешивать миксины. И да, я считаю это предложение грамматически правильным.
Давайте начнем с простейшего миксина и создадим сценарий, который вы сможете использовать в реальном веб-проекте. Предположим, что в создаваемом вами дизайне используется для основного текста стандартный шрифт без засечек, а для заголовков другой шрифт. Вместо того, чтобы прописывать каждый шрифт в отдельном классе (что было бы очень обременительно, если отдельные заголовки используют разные шрифты), вы можете задать шрифты в миксине и включить этот класс в другие классы.
Для этого мы создадим три класса: класс serif, класс sans-serif и класс monospace. Кроме того, в этом примере я добавлю две переменные, которые мы рассмотрели во второй части этой серии. Давайте взглянем на код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Переменные @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 (/* */) будут скомпилированы, но, очевидно, не будут отображаться. Давайте перейдем к сути.
Вернемся к коду, проверим, как мы форматируем тег абзаца.
|
1 2 3 4 5 |
p { font-size: @baseFontSize; line-height: @baseLineHeight; .serif; } |
Как видите, мы задаем размер шрифта и высоту строки, используя указанные нами переменные, которые не требуют объяснения. Потом мы задаем шрифт, просто обращаясь к классу serif в свойствах абзаца. Этот миксин действует подобно переменной. Миксин .serif хранит все свойства в “.serif” и при компиляции все свойства включаются в свойства абзаца. Давайте посмотрим на скомпилированную версию.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 отображает в таком случае:
|
1 2 3 4 5 |
p { font-size: @baseFontSize; line-height: @baseLineHeight; .sans-serif; } |
И получаем результат:
|
1 2 3 4 5 |
p { font-size: 14px; line-height: 21px; font-family: Helvetica, Arial, sans-serif; } |
Это должно дать вам представление о том, насколько удивительные и мощные возможности открывают перед вами подобные функции. Но мы еще не закончили, давайте теперь рассмотрим миксин с параметрами.
Миксины с параметрами
Миксины с параметрами – это обычные миксины, но подобно функциям, они могут принимать параметры, которые присоединяются к коду внутри миксина. Благодаря этому, вы можете задавать параметры в миксин или определять переменную в параметре, используемую по умолчанию.
Это – идеальный вариант, когда вы работаете со свойствами CSS3 и вам нужно описать префикс браузера, но вы можете использовать свойства по-разному. Чтобы описать это на примере, мы используем примесь border-radius. Вот как выглядит наш миксин:
|
1 2 3 4 5 6 7 8 9 |
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .sidebar { .border-radius(4px); } |
Итак, мы включаем все префиксы браузера CSS3 в миксин. Мы также задаем параметр для свойства, в которое мы его добавляем. Вот что мы получаем в результате:
|
1 2 3 4 5 |
.sidebar { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } |
Кроме того, можно присвоить примеси стандартные значения путем включения спецификации в изначальную примесь. Это проще понять на реальном примере. В миксинах с параметрами можно задать размер, даже если у вас есть заданный размер по умолчанию. Именно поэтому я бы рекомендовал всегда задавать значение по умолчанию. Таким образом, если вы забудете определить параметр, у вас всегда останется параметр по умолчанию. Вот как выглядит код при обоих сценариях.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.border-radius(@radius: 6px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .sidebar { .border-radius; } .sidebar2 { .border-radius(12px); } |
И вот какой результат мы получим:
|
1 2 3 4 5 6 7 8 9 10 |
.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
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.
