Миксины с параметрами
В этой статье мы с Вами продолжим изучать примеси и научимся использовать их вместе с дополнительными параметрами (аргументами), это позволит Вам сократить количество кода и ускорит процесс верстки больших проектов за счет многократного использования, созданных Вами примесей для решения необходимых задач.
Передача аргументов в миксины
В этом разделе мы научимся с Вами использовать миксины таким образом, что при их вызове мы сможем указывать различные значения цвета, ширины, высоты элементов, или прочих необходимых нам значений свойств. Если вы сталкивались с использованием переменных в LESS, то для Вас не составит труда понять этот простой синтаксис.
Для создания примеси с параметром достаточно указать в двойных скобках имя переменной, она будет иметь локальную область видимости (доступна внутри примеси), и использовать (вызвать) её в качестве значения необходимого свойства. Давайте рассмотрим на следующем примере:
.blur(@length) { // создаем примесь с параметром -webkit-filter: blur(@length); // используем имя переменной в качестве значения свойства filter: blur(@length); // используем имя переменной в качестве значения свойства } .my-element { width: 50px; height: 50px; .blur(5px); // вызываем примесь и передаем значение параметра }
В этом примере мы создали примесь с параметром, параметр выступает в качестве значения радиуса фильтра (эффекта) размытия изображения CSS свойства filter
. Обратите внимание, что для поддержки более ранних версий браузеров мы дополнительно создали свойство с индексом производителя -webkit-.
Результат компиляции будет следующий:
.my-element { width: 50px; height: 50px; -webkit-filter: blur(5px); filter: blur(5px); // радиус эффекта размытия изображения }
Значения параметров по умолчанию
Следующая полезная особенность параметрических примесей заключается в возможности указывать значения для параметров по умолчанию. Эта особенность широко используется при написании функций в различных языках программирования. Рассмотрим следующий пример:
.blur(@length:5px) { // создаем примесь с параметром, который имеет значение по умолчанию равное 5 пикселям -webkit-filter: blur(@length); // используем имя переменной в качестве значения свойства filter: blur(@length); // используем имя переменной в качестве значения свойства } .my-element { width: 50px; height: 50px; .blur(); // вызываем примесь без параметра } .my-another-element { width: 50px; height: 50px; .blur(10px); // вызываем примесь c параметром }
Обратите внимание на то, что не смотря на то, что у элемента с классом my-element мы вызываем примесь без параметра, значение свойства после компиляции будет равно 5 пикселям, по той причине, что это значение мы указали в качестве значения по умолчанию. Элемент с классом my-another-element получит значение, которое мы передали в качестве параметра, значение по умолчанию в данном случае использовано не будет.
Результат компиляции будет следующий:
.my-element { width: 50px; height: 50px; -webkit-filter: blur(5px); filter: blur(5px); // радиус эффекта размытия изображения } .my-another-element { width: 50px; height: 50px; -webkit-filter: blur(10px); filter: blur(10px); // радиус эффекта размытия изображения }
Миксины с несколькими параметрами
Для решения некоторых задач нам необходимо использование нескольких параметров в примеси, как правило это удобно тогда, когда необходимо указать значения для разных свойств в одной примеси. Кроме того, если в значении CSS свойства предусмотрена запятая, то используя один параметр в примеси, компилятор не позволит вам провести компиляцию и вызовет ошибку, это можно обойти, используя экранирование, либо указать точку с запятой после значения (рекомендованный вариант):
.myMixin(~'10px, 10px') .myMixin(10px, 10px;) // рекомендованный вариант
Для создания примеси с несколькими параметрами необходимо перечислить их через запятую, либо точку с запятой. Обращаю Ваше внимание, что рекомендовано перечислять параметры используя точку с запятой, это связано с тем, что символ запятая имеет двойное значение: он может интерпретироваться компилятором как разделитель параметров примеси, или разделитель значения CSS свойства.
Ниже представлены различные правильные варианты вызова и объявления примесей:
.myMixin(1, 2, 3; something, else) // два аргумента и каждый из них содержит список, разделенный запятыми .myMixin(1, 2, 3) // три аргумента и каждый из них содержит одно число .myMixin(1, 2, 3;) // один параметр, который содержит значение, перечисленное через запятую (точка с запятой обязательна, иначе интерпритируется как три аргумента) .myMixin(@param1: red, blue;) // один параметр, который содержит значение по умолчанию, перечисленное через запятую .myMixin(@param1: red, blue; @param2: 10, 20;) // два параметра, которые содержат значение по умолчанию, перечисленное через запятую
Давайте перейдем к рассмотрению примера, в котором создадим примесь с двумя параметрами, параметры выступят в качестве значений для двухмерного преобразования путем наклона элемента относительно осей X и Y CSS свойства transform:
.skew (@x-angle; @y-angle:0) { // создаем примесь с двумя параметрами, второй параметр имеет значение по умолчанию равное 0 webkit-transform: skew(@x-angle, @y-angle); moz-transform: skew(@x-angle, @y-angle); ms-transform: skew(@x-angle, @y-angle); -o-transform: skew(@x-angle, @y-angle); transform: skew(@x-angle, @y-angle); } .my-element { width: 50px; height: 50px; .skew(-10deg; 10deg); // вызываем примесь c двуми параметрами } .my-another-element { width: 50px; height: 50px; .skew(10deg); // вызываем примесь c одним параметром }
Результат компиляции будет следующий:
.my-element { width: 50px; height: 50px; webkit-transform: skew(-10deg, 10deg); moz-transform: skew(-10deg, 10deg); ms-transform: skew(-10deg, 10deg); -o-transform: skew(-10deg, 10deg); transform: skew(-10deg, 10deg); // двухмерное преобразование путем наклона элемента относительно осей X и Y } .my-another-element { width: 50px; height: 50px; webkit-transform: skew(10deg, 0); moz-transform: skew(10deg, 0); ms-transform: skew(10deg, 0); -o-transform: skew(10deg, 0); transform: skew(10deg, 0); // двухмерное преобразование путем наклона элемента относительно осей X и Y }
Создание одноименных примесей
Если вы создадите примеси с одним и тем же именем, но разным содержанием, то в этом случае произойдет объединение вложенных свойств:
.mixin(@color) { // создаем примесь с одним параметром color: @color; } .mixin(@color; @padding: 2px) { // создаем примесь с двумя параметрами, второй параметр имеет значение по умолчанию равное 2px color: @color; padding: @padding; } .mixin(@color; @padding; @margin:2px) { // создаем примесь с тремя параметрами, третий параметр имеет значение по умолчанию равное 2px color: @color; padding: @padding; margin: @margin; } .my-element { .mixin(#000); // вызываем примесь c одним параметром } .my-another-element { .mixin(#000; 2px); // вызываем примесь с двумя параметрами }
Одноименные примеси позволяют нам контролировать поведение примеси в зависимости от количества переданных ей аргументов (параметров), это с одной стороны расширяет возможности при написании кода, а с другой может привести к непредсказуемым ошибкам, поэтому пользуйтесь этой возможность LESS обдуманно.
Обратите внимание, что при компиляции будет использоваться та примесь, которая полностью соответствует шаблону вызова, в первом случае это первая и вторая примесь, а во втором все три. Мы еще неоднократно в этом учебнике будем возвращаться к созданию одноименных примесей, рассмотрим некотрые нюансы и методы работы с ними.
Результат компиляции будет следующий:
.my-element { color: #000; padding: 2px; } .my-another-element { color: #000; padding: 2px; margin: 2px; }
Именованные параметры
При вызове примеси допускается изменять порядок следования параметров, указанных при создании этой примеси. Для этого достаточно при вызове примеси указать вместе со значением имя интересующего параметра, то есть необходимо сослаться на него по имени. Давайте рассмотрим следующий пример:
.myMixin(@color: #fff; @width: 100px; @height: 50px) { // создаем примесь с тремя параметрами, все параметры имеют значение по умолчанию color: @color; width: @width; height: @height; } .my-element { .myMixin(@width: 100%; @height: 100%) // вызываем примесь с двумя параметрами } .my-another-element { .myMixin(#000; @height: 20px) // вызываем примесь с двумя параметрами }
В этом примере мы создали примесь с тремя параметрами, все эти параметры имеют значение по умолчанию. Для элемента с классом .my-element мы вызываем примесь с двумя параметрами, указывая в первую очередь значение ширины, а во втором значение высоты. Обратите внимание, что мы вместе с значением указываем и имя свойства для которого это значение будет установлено. Элементу с классом .my-another-element мы по такому же принципу задаем цвет текста и высоту, вызывая примесь с двумя параметрами.
Результат компиляции будет следующий:
.my-element { color: #fff; width: 100%; height: 100%; } .my-another-element { color: #000; width: 100px; height: 20px; }
Переменная @arguments
Переменная @arguments в LESS имеет специальное значение внутри примесей, когда примесь вызывается, то переменная @arguments будет содержать все переданные в примесь значения. Это может быть полезно в том случае, если Вы не хотите работать с индивидуальными параметрами. Рассмотрим следующий пример:
.orangeShadow(@h-shadow:0; @v-shadow:0; @blur-radius:3px; @color: orange) { // создаем примесь с тремя параметрами, все параметры имеют значение по умолчанию text-shadow: @arguments; } .my-element { .orangeShadow(2px; 3px) // вызываем примесь с четырьмя параметрами } .my-another-element { .orangeShadow(-2px; 3px; @color:red) // вызываем примесь с тремя параметрами }
В этом примере мы создали примесь, которая в качестве значения свойства text-shadow устанавливает переменную @arguments, которая может содержать все переданные в примесь значения. В первом случае мы передаем два значения, а во втором три.
Результат компиляции будет следующий:
.my-element { text-shadow: 2px 3px 3px orange; } .my-another-element { text-shadow: -2px 3px 3px red; }
Переменная @rest и дополнительные аргументы
Переменная @rest... в LESS позволяет указать компилятору на то, что пользователь может указать произвольное число аргументов. Обратите внимание, что необходимо обязательно указать троеточие в имени переменной, как будто вы говорите компилятору, щас тут еще будут данные, ты там сам как-нибудь разберись, это все тебе. То есть он собирает значения всех оставшихся аргументов в одно и устанавливает в качестве значения. Магия здесь заключается не в использовании имени переменной, а в использовании троеточия, вы можете использовать произвольное имя
.mixin(@color: #000; @shadow...) { // создаем примесь с тремя параметрами, все параметры имеют значение по умолчанию color: @color; text-shadow: @shadow; } .my-element { .mixin(red; -2px; 3px; 1px; #777) // вызываем примесь с пятью параметрами }
В этом примере мы создали примесь, которая в качестве значения свойства text-shadow устанавливает переменную @rest.... При вызове примеси мы передаем в неё 5 аргументов, первый аргумент будет установлен для свойства color, а все остальные аргументы благодаря переменной @rest... будут установлены в качестве значения свойства text-shadow.
Результат компиляции будет следующий:
.my-element { color: red; text-shadow: -2px 3px 1px #777; }
Допускается при использовании троеточия не указывать имя переменной, этот подход, например, используется в различных библиотеках миксин, где значение, которое будет установлено для свойств рассчитывается с помощью функции, написанной на языке программирования JavaScript, к этому мы с Вами еще вернемся в будущих статьях. Давайте рассмотрим пример использования:
.mixin(...) { // создаем примесь с произвольным количеством аргументов от 0 до N border: @arguments; // используем для передачи всех аргументов переменную @arguments } .anotherMixin(@color, ...) { // создаем примесь с количеством аргументов от 1 до N color: @color; border: @arguments; // используем для передачи всех аргументов переменную @arguments } .my-element { .mixin(1px; solid; green) // вызываем примесь с тремя параметрами } .my-another-element { .anotherMixin(red; 1px; solid) // вызываем примесь с тремя параметрами }
В этом примере мы создали две примеси, первая примесь может принимать произвольное количество аргументов, с помощью переменной @arguments мы устанавливаем все переданные пользователем аргументы свойству border.
Вторая примесь может получать от одного до произвольного количества аргументов. Первый аргумент будет соответствовать переменной @color и будет соответствовать значению свойства color. Первый аргумент и остальные аргументы, в том случае, если они будут переданы, будут установлены с помощью переменной @arguments свойству color.
Результат компиляции будет следующий:
.my-element { border: 1px solid green; } .my-another-element { color: red; border: red 1px solid; }
Мы с Вами рассмотрели основные моменты работы с примесями, но это далеко не все возможности, которые предоставляет нам метаязык LESS для работы с ними, далее в учебнике мы вернемся к их углубленному изучению.