less миксины с параметрами
Примеси с параметрами в препроцессоре LESS. Для чего нужны в LESS параметры в примесях
Примесям можно передавать аргументы, которые в качестве переменных используются в блоке примеси.
Применяем в различных правилах::
Параметры в примесях могут также иметь значения по умолчанию::
Мы можем ссылаться на него, как здесь:
И подключить border-radius 5px.
Также можно использовать примеси, которые не принимают параметры. Это пригодится, если вы захотите спрятать примесь в CSS. При этом сама примесь будет использоваться (внутри блока объявлений):
Вот какой получится CSS:
Примеси с несколькими параметрами в LESS
Параметры в LESS разделяются запятой или точкой с запятой. Рекомендуется все жеиспользовать точку с запятой, так как запятая в LESS имеет двойной смысл: ее можно интерпретировать как разделитель для разделения примесей или как разделитель селекторов в CSS.
Использование запятой в качестве разделителя аргументов у примеси делает невозможным создание списка CSS как аргумента. Тоесть, если компилятор видит по крайней мере одну точку с запятой при вызове примеси, он предполагает, что разделителем является точка с запятой и все запятые относятся к спискам CSS:
Названные параметры
Ссылка на примесь может поставлять значения параметров по их именам, за место позиций. К любому параметру можно обратиться по имени, они для этого не обязательно должны располагаться в определенном порядке:
У @arguments есть специальное значение в примесях, оно содержит все переданные аргументы, когда примесь вызывается. Это полезно, если вы не хотите разбираться с индивидуальными параметрами:
В результате получим CSS:
Дополнительные аргументы и переменная @rest
Копирование шаблона
Иногда бывает нужно изменить поведение примеси, основываясь на параметрах, которые вы ей передаете. Начнем с основ:
Мы получим такую CSS:
Используются только определения совпавших примесей. Переменные совпадают и привязываются к любым значениям. Любые величины, кроме переменных, будут совпадать лишь со значением, равным своему собственному.
Арность также может совпадать, взгляните:
Миксины в LESS (примеси)
В этой статье мы продолжим изучение динамического метаязыка LESS и научимся с помощью него переиспользовать наш CSS код, что позволит увеличить скорость написания стилей и от части упростить процесс верстки Ваших страниц.
Базовое использование примесей
Примеси (от англ. mix-in) — мощный инструмент, который позволяет Вам повторно использовать ранее созданные стили. Для этого достаточно добавить внутри блока объявления селектора наименование ранее созданного селектора (чьи стили необходимо импортировать):
Результат компиляции будет следующим:
Создание примесей без транспиляции
Следующая полезная особенность использования примесей заключается в том, что если вы хотите создать примесь, но при этом не хотите, чтобы она попала в файл с таблицами стилей, то достаточно поставить скобки после названия селектора. Если вы частично знакомы с языками программирования, то вы обратите внимание, что этот синтаксис похож на вызов функции.
Перейдем к рассмотрению примера:
Обратите внимание на то, что у класса my-not-output-class мы дополнительно указываем скобки, этим мы даем указание компилятору не создавать подобный отдельный класс CSS стилей, а только использовать в том месте, где мы его вызвали. Это необходимо, чтобы Ваши CSS стили оставались чистыми и не разростались неиспользуемыми классами.
Следующее на что необходимо обратить внимание, это то что примеси могут содержать не только свойства, но и вложенные селекторы и псевдоклассы. В результате компиляции класс my-not-output-class не попадет в каскадные таблицы стилей:
Использование вложенных примесей
Пространство имён (англ. namespace) — некоторое множество, под которым подразумевается модель, абстрактное хранилище, или окружение, созданное для логической группировки уникальных идентификаторов (то есть имён).
Например, поместим наши примеси внутри определенного класса:
Обратите внимание на важный момент, мы не можем просто указать класс hidden, или bordered, так как они вложены в другой класс, а мы должны указать путь до примеси, и использовать любой валидный CSS селектор для этого, например:
Результат компиляции будет следующий:
Изучаем LESS: Миксины
Дата публикации: 2018-01-15
От автора: итак, мы продолжаем наше знакомство с LESS и сегодня рассмотрим такой мощный компонент, как миксины LESS.
Давайте узнаем, что же такое миксины LESS и как их использовать.
Что такое миксины?
Миксины (англ. mixins) в LESS – это, главным образом, сгруппированный набор свойств CSS, которые могут быть вложены в различные селекторы LESS. Это как переменная с несколькими разными свойствами.
Есть идеи насчет того, где их можно применить? [Ответ. CSS3.] Вы будете поражены тем, насколько широкие возможно дают нам миксины, так как в нашем распоряжении есть и Миксины и Миксины с параметрами, которые могут принимать переменные. Вы также можете смешивать миксины. И да, я считаю это предложение грамматически правильным.
Давайте начнем с простейшего миксина и создадим сценарий, который вы сможете использовать в реальном веб-проекте. Предположим, что в создаваемом вами дизайне используется для основного текста стандартный шрифт без засечек, а для заголовков другой шрифт. Вместо того, чтобы прописывать каждый шрифт в отдельном классе (что было бы очень обременительно, если отдельные заголовки используют разные шрифты), вы можете задать шрифты в миксине и включить этот класс в другие классы.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Для этого мы создадим три класса: класс serif, класс sans-serif и класс monospace. Кроме того, в этом примере я добавлю две переменные, которые мы рассмотрели во второй части этой серии. Давайте взглянем на код.
Миксины с параметрами
В этой статье мы с Вами продолжим изучать примеси и научимся использовать их вместе с дополнительными параметрами (аргументами), это позволит Вам сократить количество кода и ускорит процесс верстки больших проектов за счет многократного использования, созданных Вами примесей для решения необходимых задач.
Передача аргументов в миксины
В этом разделе мы научимся с Вами использовать миксины таким образом, что при их вызове мы сможем указывать различные значения цвета, ширины, высоты элементов, или прочих необходимых нам значений свойств. Если вы сталкивались с использованием переменных в LESS, то для Вас не составит труда понять этот простой синтаксис.
Для создания примеси с параметром достаточно указать в двойных скобках имя переменной, она будет иметь локальную область видимости (доступна внутри примеси), и использовать (вызвать) её в качестве значения необходимого свойства. Давайте рассмотрим на следующем примере:
Результат компиляции будет следующий:
Значения параметров по умолчанию
Следующая полезная особенность параметрических примесей заключается в возможности указывать значения для параметров по умолчанию. Эта особенность широко используется при написании функций в различных языках программирования. Рассмотрим следующий пример:
Обратите внимание на то, что не смотря на то, что у элемента с классом my-element мы вызываем примесь без параметра, значение свойства после компиляции будет равно 5 пикселям, по той причине, что это значение мы указали в качестве значения по умолчанию. Элемент с классом my-another-element получит значение, которое мы передали в качестве параметра, значение по умолчанию в данном случае использовано не будет.
Результат компиляции будет следующий:
Миксины с несколькими параметрами
Для решения некоторых задач нам необходимо использование нескольких параметров в примеси, как правило это удобно тогда, когда необходимо указать значения для разных свойств в одной примеси. Кроме того, если в значении CSS свойства предусмотрена запятая, то используя один параметр в примеси, компилятор не позволит вам провести компиляцию и вызовет ошибку, это можно обойти, используя экранирование, либо указать точку с запятой после значения (рекомендованный вариант):
Для создания примеси с несколькими параметрами необходимо перечислить их через запятую, либо точку с запятой. Обращаю Ваше внимание, что рекомендовано перечислять параметры используя точку с запятой, это связано с тем, что символ запятая имеет двойное значение: он может интерпретироваться компилятором как разделитель параметров примеси, или разделитель значения CSS свойства.
Ниже представлены различные правильные варианты вызова и объявления примесей:
Давайте перейдем к рассмотрению примера, в котором создадим примесь с двумя параметрами, параметры выступят в качестве значений для двухмерного преобразования путем наклона элемента относительно осей X и Y CSS свойства transform
:
Результат компиляции будет следующий:
Создание одноименных примесей
Если вы создадите примеси с одним и тем же именем, но разным содержанием, то в этом случае произойдет объединение вложенных свойств:
Одноименные примеси позволяют нам контролировать поведение примеси в зависимости от количества переданных ей аргументов (параметров), это с одной стороны расширяет возможности при написании кода, а с другой может привести к непредсказуемым ошибкам, поэтому пользуйтесь этой возможность LESS обдуманно.
Обратите внимание, что при компиляции будет использоваться та примесь, которая полностью соответствует шаблону вызова, в первом случае это первая и вторая примесь, а во втором все три. Мы еще неоднократно в этом учебнике будем возвращаться к созданию одноименных примесей, рассмотрим некотрые нюансы и методы работы с ними.
Результат компиляции будет следующий:
Именованные параметры
При вызове примеси допускается изменять порядок следования параметров, указанных при создании этой примеси. Для этого достаточно при вызове примеси указать вместе со значением имя интересующего параметра, то есть необходимо сослаться на него по имени. Давайте рассмотрим следующий пример:
В этом примере мы создали примесь с тремя параметрами, все эти параметры имеют значение по умолчанию. Для элемента с классом .my-element мы вызываем примесь с двумя параметрами, указывая в первую очередь значение ширины, а во втором значение высоты. Обратите внимание, что мы вместе с значением указываем и имя свойства для которого это значение будет установлено. Элементу с классом .my-another-element мы по такому же принципу задаем цвет текста и высоту, вызывая примесь с двумя параметрами.
Результат компиляции будет следующий:
Переменная @arguments
Переменная @arguments в LESS имеет специальное значение внутри примесей, когда примесь вызывается, то переменная @arguments будет содержать все переданные в примесь значения. Это может быть полезно в том случае, если Вы не хотите работать с индивидуальными параметрами. Рассмотрим следующий пример:
Результат компиляции будет следующий:
Переменная @rest и дополнительные аргументы
Переменная @rest. в LESS позволяет указать компилятору на то, что пользователь может указать произвольное число аргументов. Обратите внимание, что необходимо обязательно указать троеточие в имени переменной, как будто вы говорите компилятору, щас тут еще будут данные, ты там сам как-нибудь разберись, это все тебе. То есть он собирает значения всех оставшихся аргументов в одно и устанавливает в качестве значения. Магия здесь заключается не в использовании имени переменной, а в использовании троеточия, вы можете использовать произвольное имя
Результат компиляции будет следующий:
Допускается при использовании троеточия не указывать имя переменной, этот подход, например, используется в различных библиотеках миксин, где значение, которое будет установлено для свойств рассчитывается с помощью функции, написанной на языке программирования JavaScript, к этому мы с Вами еще вернемся в будущих статьях. Давайте рассмотрим пример использования:
В этом примере мы создали две примеси, первая примесь может принимать произвольное количество аргументов, с помощью переменной @arguments мы устанавливаем все переданные пользователем аргументы свойству border.
Вторая примесь может получать от одного до произвольного количества аргументов. Первый аргумент будет соответствовать переменной @color и будет соответствовать значению свойства color. Первый аргумент и остальные аргументы, в том случае, если они будут переданы, будут установлены с помощью переменной @arguments свойству color.
Результат компиляции будет следующий:
Мы с Вами рассмотрели основные моменты работы с примесями, но это далеко не все возможности, которые предоставляет нам метаязык LESS для работы с ними, далее в учебнике мы вернемся к их углубленному изучению.
Изучаем LESS: Mixin’ы
Давайте продолжим наше путешествие в недра LESS, и сегодня мы предлагаем вам окунуться в мир миксинов. Если вы не читали первую и вторую части нашего руководства «Изучаем LESS: Введение» и «Изучаем LESS: Использование переменных», то не забудьте ознакомиться с ними прежде, чем приступать к чтению сегодняшней статьи.
Итак, перейдем сразу к делу – к mixin’ам (или примесям, миксинам). Сегодня мы расскажем вам о том, что можно сделать с их помощью.
Что такое миксин или примесь?
Миксин в LESS – это обычно группа CSS-параметров, связанных между собой в один, который затем может быть вставлен в переменную других селекторов LESS. Можно сказать, что это нечто вроде переменной, только с несколько иными параметрами.
Есть какие-то мысли по поводу того, где такой элемент может нам пригодиться? (Ответ: CSS3). И вы будете премного удивлены, насколько удобными могут быть миксины, так как у нас есть простые миксины и параметрические миксины, которые могут принимать переменные. Вы даже можете перемешивать примеси с примесями. Все верно, это предложение грамматически правильное.
Итак, начиная работать с основным миксином, давайте разработаем план действий, который вы будете использовать в проекте разработки веб-дизайна. Предположим, что дизайн, который вы разрабатываете, оформлен стандартным шрифтом без засечек в качестве тела документа, и имеет другой шрифт с засечками для оформления заголовков. Вместо того, чтобы прописывать каждый шрифт в отдельный класс (что впоследствии будет очень неудобно, особенно, если в разных заголовках используются разные шрифты), вы можете выставить шрифты внутри миксина, и включить данный класс в другие классы.
Для того чтобы это реализовать, мы создадим 3 класса: класс serif, класс sans-serif и класс monospace. Вдобавок, для наглядности, мы создадим 2 переменные, с которыми мы познакомились в нашем прошлом руководстве. Давайте рассмотрим код.
Все довольно обычно, не правда ли? Кстати, «//» обозначает комментарий в LESS, и не компилируется посредством приложения LESS.app. Стандартные комментарии CSS («/* */) будут компилироваться, но не читаться. Давайте подробнее рассмотрим код миксина.
Возвращаясь к коду, не забудьте обратить внимание на то, как мы форматируем наш тэг параграфа.
Давайте взглянем на скомпилированную версию.
И в результате мы получим:
Это должно хотя бы немного продемонстрировать вам, насколько быстро и эффективно можно вносить изменения посредством LESS. Но мы еще не закончили, давайте познакомимся с параметрическими миксинами.
Parametric Mixins (Параметрические Миксины)
Параметрические миксины почти такие же, как и обычные, но сродни функциям они могут принимать параметры для прикрепления кода внутри миксина. Учитывая это, вы можете выставить параметр в вашем миксине или можете определить переменную внутри вашего параметра для опции по умолчанию.
Это идеально подходит для использования при работе с CSS3-параметрами или когда вам нужно объявить браузерные префиксы, но вы можете использовать эти параметры различными способами. В нашем примере мы используем border-radius. Наш миксин выглядит следующим образом:
Таким образом, в наш миксин мы интегрируем все наши браузерные префиксы CSS3. Мы также выставляем наш параметр в свойстве, в которое мы их примешиваем. Наш результат выглядит следующим образом:
Мы также можем выставить умолчания для нашего миксина за счет включения спецификации в исходный миксин. Это гораздо легче понять, если есть наглядный пример. Сравните различия с первым параметрическим миксином. Вдобавок, вы также можете выставить размер, даже если у вас уже выставлен размер по умолчанию. Именно по этой причине мы советуем вам выставлять значения по умолчанию. Таким образом, если вы забудете определить параметр, у вас будет хотя бы какое-то значение по умолчанию. Давайте рассмотрим, как выглядит код в обоих случаях.
Что в результате дает:
Заканчиваем с примесями
Итак, сегодня мы охватили знания о миксинах и параметрических миксинах. Пожалуйста, учтите, что здесь мы рассказали вам обо всем лишь поверхностно. Открывайте редактор кода и попробуйте самостоятельно поэкспериментировать. Дабы превратить ваш процесс разработки в модульный и обеспечить себе возможность повторного использования элементов, попробуйте разработать собственную библиотеку миксинов, которые вы впоследствии сможете использовать в будущих проектах.
Если вы пропустили прошлые части руководства, то обязательно ознакомьтесь с ними. В следующий раз мы расскажем вам о разветвленных правилах! Спасибо за внимание!
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях: