ОБНОВЛЕНО для LESS 1.7.0+ (НАМНОГО проще)
Теперь мы можем сделать это гораздо более прямолинейно благодаря обновлению 1.7.0 и возможности создавать наборы правил и использовать переменные в настройке @keyframes.
Теперь мы действительно можем передать миксин через параметр с помощью набора правил, или мы можем передать сами свойства. Итак, подумайте об этом:
МЕНЬШЕ (используя 1.7)
.keyframes(@name, @from, @to) {
@frames: {
from { @from(); }
to { @to(); }
};
@pre: -moz-keyframes;
@-moz-keyframes @name
{
@frames();
}
@-webkit-keyframes @name
{
@frames();
}
@keyframes @name
{
@frames();
}
}
.keyframes(testName, {color: red; .myMix(0);}, {color: blue; .myMix(1);});
.myMix(@value) {opacity: @value;}
Обратите внимание, что я передаю как настройку свойства, так и вызов миксина, и мой вывод:
Вывод CSS
@-moz-keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
@-webkit-keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
@keyframes testName {
from {
color: red;
opacity: 0;
}
to {
color: blue;
opacity: 1;
}
}
Обратите внимание, как наборы правил передаются в квадратных скобках {...}, а затем вызываются через @from() и @to() (очень похоже на вызов примеси). Я использую эти переданные наборы правил, чтобы установить другой набор правил @frames, который затем сам вызывается для заполнения определений ключевых кадров.
Более общие сведения
Здесь я передаю приватный миксин другому миксину, а затем вызываю его из этого другого миксина:
МЕНЬШЕ
.someMixin(@class; @expectedMixin) {
.@{class} {
@expectedMixin();
.myPrivateMix(0.6);
test: 1;
}
}
.someMixin(newClass; {.myClass;});
.myClass {
.myPrivateMix(@value) {opacity: @value;}
}
Вывод CSS
.newClass {
opacity: 0.6;
test: 1;
}
Сохранено ниже для устаревшей информации.
Обновлено (добавлена поддержка LESS 1.4.0+)
Вау, это потребовало некоторых усилий, но я думаю, что у меня есть кое-что, с чем вы можете поработать. Тем не менее, это требует специального определения ваших миксинов в ваших модулях, в частности, с использованием соответствие шаблону. Так...
Во-первых, определите миксины вашего модуля
Обратите внимание, что примеси модуля, предназначенные для использования в конкретном будущем примеси, определяются с тем же именем примеси, но с другим именем шаблона. Это было ключом к созданию этой работы.
// define one animation in a module
.from(my-from){ color: red; }
.to(my-to) { color: blue; }
// define one animation in another module
.from(another-from){ font-size: 1em; }
.to(another-to) { font-size: 2em; }
Если вам также нужны отдельные имена миксинов в модулях, вы сможете сделать это:
// define one animation in a module
.my-from(){ color: red; }
.my-to() { color: blue; }
.from(my-from){ .my-from() }
.to(my-to) { .my-to() }
// define one animation in another module
.another-from(){ font-size: 1em; }
.another-to() { font-size: 2em; }
.from(another-from){ .another-from() }
.to(another-to) { .another-to() }
Это должно позволить вызвать либо прямой миксин .my-from(), либо сделать его переменно доступным в более поздних миксинах, которые обращаются к единственной группе миксинов .from() через сопоставление с образцом.
Затем определите свой миксин
Для вашего примера @keyframes это было чрезвычайно сложно. Фактически, ответ на переполнение стека было очень важно помочь мне решить проблему с применением @name, которая не применялась в соответствии с обычными правилами LESS из-за того, что она соответствовала определению @keyframes. Решение применить @name выглядит неприятно, но оно работает. Возможно, у него есть досадная необходимость также определять строку селектора для воспроизведения анимации (поскольку он использует эту строку для построения последних } ключевых кадров). Это ограничение именования справедливо только для строк css, начинающихся с @, таких как @keyframes и, возможно, @media.
Кроме того, поскольку у нас есть стандартное имя примеси, используемое в наших файлах модуля, мы можем последовательно получить к нему доступ в нашем новом примеси, в то же время передавая переменную для выбора правильного варианта этого примеси через совпадение по образцу. Итак, мы получаем:
МЕНЬШЕ 1.3.3 или ниже
// define mixin in mixin file
.keyframes(@selector, @name, @from, @to) {
@newline: `"\n"`; // Newline
.setVendor(@pre, @post, @vendor) {
(~"@{pre}@@{vendor}keyframes @{name} {@{newline}from") {
.from(@from);
}
to {
.to(@to);
}
.Local(){}
.Local() when (@post=1) {
(~"}@{newline}@{selector}") {
-moz-animation: @name;
-webkit-animation: @name;
-o-animation: @name;
-ms-animation: @name;
animation: @name;
}
}
.Local;
}
.setVendor("" , 0, "-moz-");
.setVendor(~"}@{newline}", 0, "-webkit-");
.setVendor(~"}@{newline}", 0, "-o-");
.setVendor(~"}@{newline}", 0, "-ms-");
.setVendor(~"}@{newline}", 1, "");
}
МЕНЬШЕ 1.4.0+
.keyframes(@selector, @name, @from, @to) {
@newline: `"\n"`; // Newline
.setVendor(@pre, @post, @vendor) {
@frames: ~"@{pre}@@{vendor}keyframes @{name} {@{newline}from";
@{frames} {
.from(@from);
}
to {
.to(@to);
}
.Local(){}
.Local() when (@post=1) {
@animationSector: ~"}@{newline}@{selector}";
@{animationSector} {
-moz-animation: @name;
-webkit-animation: @name;
-o-animation: @name;
-ms-animation: @name;
animation: @name;
}
}
.Local;
}
.setVendor("" , 0, "-moz-");
.setVendor(~"}@{newline}", 0, "-webkit-");
.setVendor(~"}@{newline}", 0, "-o-");
.setVendor(~"}@{newline}", 0, "-ms-");
.setVendor(~"}@{newline}", 1, "");
}
Теперь назовите свой миксин
Вы можете дать ему свое собственное имя и просто передать прямой шаблон (все без точки [.] и без кавычек) для совпадения шаблона в миксинах модуля, но не забывайте, что вам также нужна строка селектора (которая заключена в кавычки), чтобы миксин работал правильно:
.keyframes('.changeColor', some-name, my-from, my-to);
.keyframes('.changeFontSize', another-name, another-from, another-to);
Что дает вам желаемый результат
@-moz-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-webkit-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-o-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@-ms-keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
@keyframes some-name {
from {
color: red;
}
to {
color: blue;
}
}
.changeColor {
-moz-animation: some-name;
-webkit-animation: some-name;
-o-animation: some-name;
-ms-animation: some-name;
animation: some-name;
}
@-moz-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-webkit-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-o-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@-ms-keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
@keyframes another-name {
from {
font-size: 1em;
}
to {
font-size: 2em;
}
}
.changeFontSize {
-moz-animation: another-name
-webkit-animation: another-name;
-o-animation: another-name;
-ms-animation: another-name;
animation: another-name;
}
person
ScottS
schedule
21.07.2012
@colorи переменную@font-sizeдля использования во втором миксине? Пожалуйста, будьте более конкретными, так как ответ Петаха был бы нормальным способом их использования. - person ScottS schedule 19.07.2012