Ответ 1
ОБНОВЛЕНО для МЕНЬШЕ 1.7.0+ (Упрощение WAY)
Мы можем сделать это гораздо более прямо сейчас с обновлением 1.7.0 и возможностью создать набор правил и использовать переменные в настройке @keyframes.
Теперь мы действительно можем передать mixin через параметр с помощью набора правил, или мы можем передать сами свойства. Поэтому рассмотрим следующее:
МЕНЬШЕ (используя 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;}
Обратите внимание, что я передаю как настройку свойства, так и вызов mixin, а мой вывод:
Выход 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() (очень похоже на вызов mixin). Я использую эти принятые наборы правил для установки другого набора правил @frames, который затем сам вызывается для заполнения определений ключевых кадров.
В общем
Здесь я передаю приватный mixin в другой mixin и затем вызываю его из этого другого mixin:
МЕНЬШЕ
.someMixin(@class; @expectedMixin) {
[email protected]{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+)
Ничего себе, это заняло некоторое время, но я думаю, что у меня есть кое-что, с чем вы можете работать. Однако в ваших модулях требуется определенное определение ваших миксинов, в частности, используя соответствие шаблону. Так что...
Сначала определите микшинг модуля
Обратите внимание на то, как модули mixins, предназначенные для использования в определенном будущем mixin, определяются с тем же именем mixin, но с другим именем шаблона. Это было ключом к выполнению этой работы.
// 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() }
Это должно позволить вызвать либо прямой mixin .my-from(), либо сделать его доступным для переменных в последующих микшинах, которые обращаются к сингулярной группе .from() mixin через сопоставление шаблонов.
Далее, Определите свой Mixin
Для вашего примера @keyframes это было чрезвычайно сложно. Фактически, ответ на переполнение стека был жизненно необходим, чтобы помочь мне решить проблему с применением @name, который не применялся при нормальном LESS из-за этого, следуя определению @keyframes. Решение применить @name выглядит противно, но оно работает. У него есть, пожалуй, неудачная необходимость также определять селекторную строку для воспроизведения анимации (потому что она использует эту строку, чтобы помочь построить последний } ключевых кадров). Это ограничение имен будет справедливо только для строк css, начинающихся с @ как @keyframes и, вероятно, @media.
Кроме того, поскольку у нас есть стандартное имя mixin, используемое в наших файлах модулей, мы можем получить доступ к этому последовательно в нашем новом mixin, в то же время передавая переменную in, чтобы выбрать правильное изменение этого mixin через совпадение шаблона. Итак, мы получаем:
МЕНЬШЕ 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, "");
}
Теперь вызовите свой микшинг
Вы можете дать ему свое имя и просто передать прямой шаблон (все не являются точкой [.] и без кавычек) для совпадений шаблонов в модулях mixins, но не забывайте, что вам также нужна строка селектора (который цитируется), чтобы заставить mixin работать правильно:
.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;
}