Учебник LESS. Статья «Миксины с параметрами»
В этой статье мы с Вами продолжим изучать примеси и научимся использовать их вместе с дополнительными параметрами (аргументами), это позволит Вам сократить количество кода и ускорит процесс верстки больших проектов за счет многократного использования, созданных Вами примесей для решения необходимых задач.
Передача аргументов в миксины
В этом разделе мы научимся с Вами использовать миксины таким образом, что при их вызове мы сможем указывать различные значения цвета, ширины, высоты элементов, или прочих необходимых нам значений свойств. Если вы сталкивались с использованием переменных в 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 для работы с ними, далее в учебнике мы вернемся к их углубленному изучению.
basicweb.ru
определение и использование с помощью директивы @mixin
От автора: директива @mixin используется для определения миксинов. Она включает необязательные переменные и аргументы, которые следуют после имени миксина.
Пример
Следующий пример иллюстрирует, как используются миксины Sass в файле SCSS: sample.htm
<html> <head> <title> Mixin example of sass</title> <link rel = «stylesheet» type = «text/css» href = «sample.css»/> </head> <body> <div class = «cont»> <h2>Example using include</h2> <h4>Directive is used to define the Mixins, it includes variables and argument optionally.</h4> </div> </body> </html>
<html> <head> <title> Mixin example of sass</title> <link rel = «stylesheet» type = «text/css» href = «sample.css»/> </head> <body> <div class = «cont»> <h2>Example using include</h2> <h4>Directive is used to define the Mixins, it includes variables and argument optionally.</h4> </div> </body> </html> |
Затем создайте файл sample.scss.
Препроцессоры. Быстрый старт
Изучите азы работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели
Узнать подробнее@mixin style { .cont{ color: #77C1EF; } } @include style;
@mixin style { .cont{ color: #77C1EF; } } @include style; |
С помощью следующей команды вы можете указать SASS просматривать файл и обновлять CSS каждый раз, когда изменяется файл SASS:
sass —watch C:\ruby\lib\sass\sample.scss:sample.css
sass —watch C:\ruby\lib\sass\sample.scss:sample.css |
Затем выполните приведенную выше команду; она автоматически создаст файл sample.css со следующим кодом —
.cont { color: #77C1EF; }
.cont { color: #77C1EF; } |
Результат на выходе
Давайте выполним следующие действия, чтобы увидеть, как работает приведенный выше код:
Сохраните приведенный выше HTML-код в файле sample.htm.
Откройте этот HTML-файл в браузере, вы должны увидеть следующее:
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.
Препроцессоры. Быстрый старт
Изучите азы работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели
Узнать подробнее
Препроцессоры. Быстрый старт
Овладейте азами работы с препроцессорами с нуля
Смотретьwebformyself.com
Учебник LESS. Статья «Миксины в LESS»
В этой статье мы продолжим изучение динамического метаязыка LESS и научимся с помощью него переиспользовать наш CSS код, что позволит увеличить скорость написания стилей и от части упростить процесс верстки Ваших страниц.
Базовое использование примесей
Примеси (от англ. mix-in) — мощный инструмент, который позволяет Вам повторно использовать ранее созданные стили. Для этого достаточно добавить внутри блока объявления селектора наименование ранее созданного селектора (чьи стили необходимо импортировать):
.my-class, #my-id {
color: red; // цвет текста
background: black; // цвет заднего фона
}
.centered {
text-align: center; //горизонтальное выравнивание текста по центру
}
.my-mixin-class {
.my-class(); // первый вариант (со скобками)
.centered; // второй вариант (без скобок)
}
#my-mixin-id {
#my-id(); // или вызов без скобок
}
Результат компиляции будет следующим:
.my-class, #my-id {
color: red;
background: black;
}
.centered {
text-align: center;
}
.my-mixin-class {
color: red;
background: black;
text-align: center;
}
#my-mixin-id {
color: red;
background: black;
}
Создание примесей без транспиляции
Следующая полезная особенность использования примесей заключается в том, что если вы хотите создать примесь, но при этом не хотите, чтобы она попала в файл с таблицами стилей, то достаточно поставить скобки после названия селектора. Если вы частично знакомы с языками программирования, то вы обратите внимание, что этот синтаксис похож на вызов функции.
Перейдем к рассмотрению примера:
.my-output-class {
color: blue;
&:hover { // стилизация элемента при наведении курсора мыши
color: green;
}
}
.my-not-output-class() {
color: green;
&:hover { // стилизация элемента при наведении курсора мыши
color: red;
}
}
.button1 {
.my-output-class(); // допускается вызов примеси без двойных скобок
}
.button2 {
.my-not-output-class(); // допускается вызов примеси без двойных скобок
}
Обратите внимание на то, что у класса my-not-output-class мы дополнительно указываем скобки, этим мы даем указание компилятору не создавать подобный отдельный класс CSS стилей, а только использовать в том месте, где мы его вызвали. Это необходимо, чтобы Ваши CSS стили оставались чистыми и не разростались неиспользуемыми классами.
Следующее на что необходимо обратить внимание, это то что примеси могут содержать не только свойства, но и вложенные селекторы и псевдоклассы. В результате компиляции класс my-not-output-class не попадет в каскадные таблицы стилей:
.my-output-class {
color: blue;
}
.my-output-class:hover {
color: green;
}
.button1 {
color: blue;
}
.button1:hover {
color: green;
}
.button2 {
color: orange;
}
.button2:hover {
color: red;
}
Использование вложенных примесей
В некоторых случаях, например при использовании сторонних библиотек, для исключения конфликтования стилей, Вам необходимо будет поместить Ваши примеси внутри какого-то селектора, в некотрых источниках это называют использованием пространств имен. Этот термин пришел к нам из программирования.Пространство имён (англ. namespace) — некоторое множество, под которым подразумевается модель, абстрактное хранилище, или окружение, созданное для логической группировки уникальных идентификаторов (то есть имён).
Например, поместим наши примеси внутри определенного класса:
.my-mixin-collection() { // создаем внутри примеси два класса
.bordered {
border: 1px solid green; // сплошная граница размером 1 пиксель зеленого цвета
}
.hidden {
display: none; // элемент не отображается
}
}
button {
.my-mixin-collection .hidden(); // вызываем примесь из класса .my-mixin-collection
.my-mixin-collection .bordered(); // вызываем примесь из класса .my-mixin-collection
}
Обратите внимание на важный момент, мы не можем просто указать класс hidden, или bordered, так как они вложены в другой класс, а мы должны указать путь до примеси, и использовать любой валидный CSS селектор для этого, например:
.my-mixin-collection .hidden(); .my-mixin-collection > .hidden(); .my-mixin-collection.hidden(); // или синтаксис без скобок: .my-mixin-collection .hidden; .my-mixin-collection > .hidden; .my-mixin-collection.hidden;
Результат компиляции будет следующий:
button {
display: none;
border: 1px solid green;
}
Использование ключевого слова !important в примесях
В LESS, как и в CSS предусмотрена возможность отменить значимость стилей, для этого необходимо добавить к значению CSS свойства ключевое слово !important. Если Вы не знакомы с этой особенностью CSS, то перед дальнейшим изучением Вы можете получить эту информацию в статье учебника CSS 3 ‘Каскадность’ в разделе отмена значимости стилей.
Что касается примесей, то вы можете использовать ключевое слово !important как к самим свойствам внутри примеси, так и при вызове самой примеси, например:
.colored() { // определяем примесь
color: red;
background: #000;
}
.hidden() { // определяем примесь
display: none !important; // определяем свойство с ключевым словом !important
}
.my-element {
.hidden(); // вызываем примесь
}
.another-element {
.colored() !important; // вызываем примесь с ключевым словом !important
}
В этом примере мы создали две примеси и вызвали их внутри различных классов. Обратите внимание, что в первом случае мы просто вызываем примесь и при компиляции получаем аналогичное свойство с заранее определенным ключевым словом !important.
Во втором случае мы добавляем ключевое слово !important непосредственно к примеси в момент её вызова, в результате чего все свойства будут скомпилированы с этим ключевым словом:
.my-element {
display: none !important;
}
.another-element {
color: red !important;
background: #000 !important;
}
basicweb.ru