将参数添加到@keyframes 属性 Less

Question

我有一个属性 @keyframes，我用 autoprefixer 编译以添加所需的前缀。

我想做的是向动画名称（或任何可能的地方）添加一个参数，以将属性值更改为关键帧键。

这就是我现在拥有的：

@keyframes loader {
  0% { transform: translate(0, -50%) rotate(0deg); }
  100% { tranform: translate(0, -50%) rotate(360deg); }
}

基本上我想做的是：

@keyframes loader(@transform) {
  0% { transform: @transform rotate(0deg); }
  100% { tranform: @transform rotate(360deg); }

Answer 1

不能直接在 Less 中将参数传递给 @keyframes。然而，我们可以将整个 @keyframes 规则包装在一个父 mixin 中，将参数传递给该 mixin 并在框架中使用它。

.loader(@transform){ /* wrapper mixin which accepts input parameter */
   @keyframes loader {
     0% { transform: @transform rotate(0deg); }
     100% { transform: @transform rotate(360deg); }
   }
}

.loader(translate(0, -50%)); /* mixin call */

(Curt 最初提供了一个答案，但由于我不知道的原因将其删除。)

如果您有兴趣，通用关键帧混合也可以像下面给出的那样用 Less 编写。

示例 1：

.generickeyframe(@name; @from; @to){ /* takes name, from frame rules, to frame rules */
  @keyframes @name{
    0% { @from();}
    100% { @to();}
  }
}
.generickeyframe(loader; {transform: translate(0,-50%) rotate(0deg)}; 
            {transform: translate(0,-50%) rotate(360deg)});

示例 2：

.keyframefromto(@name; @from; @to){
  @keyframes @name{
    0% { transform: @from;}
    100% { transform: @to;}
  }
}
.keyframefromto(loader; translate(0,-50%) rotate(0deg); translate(0,-50%) rotate(360deg));

如果 @keyframes 规则中需要出现多个帧，我们可以使用数组列表和循环，如下面的代码片段所示。这个 mixin 将动画的名称、帧列表（它们的百分比）和每个帧的属性（以规则集的形式）作为参数。

.generickeyframe(@name; @framelist; @frameprops){
  @keyframes @name{
    .loop-framelist(@index) when (@index <= length(@framelist)){
      @framepos: extract(@framelist, @index) * 1%;
      @{framepos}{
        @props: extract(@frameprops, @index);
        @props();
      }
      .loop-framelist(@index + 1);
    }
    .loop-framelist(1);
  }
}
.generickeyframe(loader; 
                0,25,50,75,100; 
                {transform: translateX(10px);},
                {transform: translateX(20px);},
                {transform: translateX(50px);},
                {transform: translateX(20px);},
                {transform: translateX(10px);}
                );

已编译CSS:

@keyframes loader {
  0% {transform: translateX(10px);}
  25% {transform: translateX(20px);}
  50% {transform: translateX(50px);}
  75% {transform: translateX(20px);}
  100% {transform: translateX(10px);}
}

将参数添加到@keyframes 属性 Less

Add argument into @keyframes property Less

css

arguments

less

less-mixins