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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как видите, мы задаем размер шрифта и высоту строки, используя указанные нами переменные, которые не требуют объяснения. Потом мы задаем шрифт, просто обращаясь к классу serif в свойствах абзаца. Этот миксин действует подобно переменной. Миксин .serif хранит все свойства в “.serif” и при компиляции все свойства включаются в свойства абзаца. Давайте посмотрим на скомпилированную версию.

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

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

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

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

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

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

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

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

Это – идеальный вариант, когда вы работаете со свойствами CSS3 и вам нужно описать префикс браузера, но вы можете использовать свойства по-разному. Чтобы описать это на примере, мы используем примесь border-radius. Вот как выглядит наш миксин:

Итак, мы включаем все префиксы браузера CSS3 в миксин. Мы также задаем параметр для свойства, в которое мы его добавляем. Вот что мы получаем в результате:

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

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

Заключение

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

Автор: 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree