Ответ 1
По LESS >= 1.7 вы можете использовать переменные для ключевых слов (имен) ключевых кадров.
В LESS 1.7 были внесены некоторые изменения в работу директив, что позволяет использовать переменные для имени/ключевого слова @keyframes (так что пример из вопроса должен работать сейчас).
DEMO
К сожалению, имена ключевых кадров не могут быть динамически генерированы в LESS <= 1.6
Следовательно, нормальный способ перехода к ключевым кадрам будет использовать жестко заданные имена, и вы будете вызывать только специальные "для" и "для" mixins, например:
.colors-mixin-frame(@from,@to){
from {color: @from;}
to {color: @to;}
}
.width-mixin-frame(@from,@to){
from {width: @from;}
to {width: @to;}
}
// keyframes with hardcoded names calling for specific mixin frames
@keyframes red-blue { .colors-mixin-frame(red, blue); }
@keyframes change-width { .width-mixin-frame(254px, 512px); }
Но вы можете использовать обходной путь для динамического создания имен
где вы вводите имя в имя правила, это требует объявления следующего правила, которое поставляет закрывающий скобок } в конце объявления ключевых кадров. Наиболее удобно, если вы просто создаете анимацию, вызывающую этот ключевой кадр
.animation-keyframes(@name, @from, @to, @anim-selector) {
@keyf: ~"@keyframes @{name} { `'\n'`from ";
@anim: ~"} `'\n'`[email protected]{anim-selector}";
@{keyf} {
.from(@name,@from);
}
to {
.to(@name,@to);
}
@{anim} {
animation-name:@name;
}
}
Обратите внимание, что вам также необходимо определить .from(){} и .to(){} mixins, а не просто использовать @from и @to так же, как в вашем примере (поскольку LESS также не позволяет создавать динамически генерируемые свойства).. Этот mixins теперь может создавать желаемые свойства и значения... для использования определенного свойства вы можете использовать защитные устройства или подобные им микшины, такие как:
// name-specific from and to mixins that are used if first argument equals "colors"
.from (colors, @color) {
color: @color;
}
.to (colors, @color) {
color: @color;
}
Теперь мы можем вызвать наш mixin в LESS:
// test
.animation-keyframes (colors, red, blue, my-colanim);
и получите CSS:
@keyframes colors {
from {
color: #ff0000;
}
to {
color: #0000ff;
}
}
.my-colanim {
animation-name: colors;
}
это будет работать и в LESS 1.4, но обратите внимание, что мы использовали интерполяцию javascript для разрывов строк, для которой требуется реализация javascript LESS.
Изменить: на ваш дополнительный вопрос о префиксах
Mixin с префиксами поставщика
Здесь я сделал два микшина... один без префиксов поставщика и один с ними оба вызывали общий .keyframes mixin:
.keyframes (@name, @from, @to, @vendor:"", @bind:"") {
@keyf: ~"@{bind}@@{vendor}keyframes @{name} { `'\n'`from ";
@{keyf} {
.from(@name,@from);
}
to {
.to(@name,@to);
}
}
.animation-keyframes-novendor (@name, @from, @to, @anim-selector) {
.keyframes (@name, @from, @to);
@anim: ~"} `'\n'`[email protected]{anim-selector}";
@{anim} {
animation-name:@name;
}
}
.animation-keyframes (@name, @from, @to, @anim-selector) {
@bind: "} `'\n'`";
.keyframes (@name, @from, @to, "-moz-");
.keyframes (@name, @from, @to, "-webkit-", @bind);
.keyframes (@name, @from, @to, "-o-", @bind);
.keyframes (@name, @from, @to, "-ms-", @bind);
.keyframes (@name, @from, @to, "", @bind);
@anim: ~"} `'\n'`[email protected]{anim-selector}";
@{anim} {
-moz-animation: @name;
-webkit-animation: @name;
-o-animation: @name;
-ms-animation: @name;
animation: @name;
}
}
.from (colors, @color) {
color: @color;
}
.to (colors, @color) {
color: @color;
}
/* keyframes with all vendor prefixes */
.animation-keyframes (colors, red, blue, my-colanim);
/* keyframes with no vendor prefix */
.animation-keyframes-novendor (colors, red, blue, my-colanim);
.animation-keyframes теперь будет генерировать ключевые кадры для всех префиксов поставщиков и селектор анимации с свойствами префикса поставщика. И, как и ожидалось, .animation-keyframes-novendor дает тот же результат, что и вышеприведенное простое решение (без префиксов поставщика).
Некоторые примечания:
-
Чтобы ваша анимация действительно работала, вам нужно установить другие параметры анимации, такие как функция времени, продолжительность, направление, количество итераций (требуется, по крайней мере, время продолжительности в дополнение к уже заданному имени).
Например:
animation: @name ease-in-out 2s infinite alternate;
-
Если вы завершаете над mixins в пространствах имен, убедитесь, что вы изменили ссылки mixin внутри других mixins на весь их путь (включая пространства имен).
Например:
#namespace > .keyframes () // see .less source in the demo for details