—»     —»   Изучаем 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   Прочитано (раз): 17016   |   Оставлено комментариев: 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   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
mrnobody, отредактировано. Спасибо.
Комментарий #4: 11 февраля 2013 @ 13:18
Написал: lexx — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Было бы круто, если можно было переопределять какое-нибудь значение примеси. Например есть два блока с кучей одинаковых свойств, но отличалось бы только одно, например, height. Логично можно было бы использовать примесь, переопределяя его значение height. Такое, в принципе, работает, но некрасиво. В CSS на выходе height дублируется. Сначала одно значение, потом новое.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Купить кухню в москве
Дизайнерские кухни из стали-это очень стильно, экологично и профессионально
mebelniray.ru
Купить акпп
Продажа Ниссан! А где лучше купить знаешь? Почитай отзывы сначала
avtomaximum.kz
Гепатит с лечение
Как добиться полной ремиссии гепатита в домашних условиях. Узнайте на сайте
gepatit-shop.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31