使用LESS CSS在CSS关键帧中使用@符号和变量

Question

我需要8种不同的CSS3动画,这些动画太相似了,所以我使用了LESS.下面是代码,它完美地运行,带有一个小故障 - @name变量.

.animation_top (@name, @pxFrom, @pxTo) {
    @-moz-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-webkit-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-ms-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }
}

因为css关键帧是由@符号启动的,所以LESS只是忽略@name的变量.有没有办法如何逃脱关键帧@符号或迫使LESS以某种方式正确渲染@name？

Answer 1

EDIT
对(~"@{varname}")选择器的支持将在LESS 1.4.0中删除.
要使原始解决方案起作用,只需引入一个临时变量并使用选择器插值(LESS 1.3.1中的新增内容).
对于前面的示例,这将是:

 @tmp: ~"@{varname}"
 @{tmp} { ... }

下面的解释仍然使用旧选择器,因为它是简洁的.如前所示,用新方法替换旧方法是微不足道的.
我确实更新了代码示例,因为我们很多人盲目地复制粘贴代码.

预期的语法是(vendorprefixed)(~"@keyframes @{name}") { ... }.但是,输出不正确(选择器合并到@keyframes name 0% { ... } @keyframes name 100% {}),因为树语法@keyframes在较少的^源代码中被定义为异常.

我狡猾的mixin背后的想法是通过选择器添加花括号.

• 初始选择器将是(~"@keyframes @{name}{") { ... }.
  这呈现为:@keyframes name {{ ... }
• 由于{{看起来不太好,我添加换行符.我无法直接逃脱换行符,因此我决定创建一个变量@newline: `"\n"`;.较少解析反引号之间的任何内容作为JavaScript,因此结果值是换行符.由于{ ... }要求"选择器"有效,我们选择动画的第一步,0%.
• 花括号不匹配.为了解决这个问题,我们可以在最后添加一个虚拟选择器(~"} dummy") { .. }.这很难看,因为添加了一个无用的选择器.
  但是等等,我们已经知道将按顺序添加特定于供应商的前缀.所以,让最后的第一个选择器成为(~"@{pre}@@{vendor}keyframes @{name} {@{newline}0%").
  @{pre}必须在第一个之后的"}@{newline}"每个关键帧块.
• 现在我们已经处理了除最后一个块之外的每个块的结束花括号.我们不必使用无用的虚拟选择器,因为我们显然定义了关键帧以便使用它们.animation-name是这样做的财产.我正在使用一个有保护的mixin来实现这一点.

解决方案起初可能看起来有点尴尬,但它非常简洁.

@newline: `"\n"`; // Newline
.animation_top(@selector, @name, @pxFrom, @pxTo) {
    .Keyframe(@pre, @post, @vendor) {
        @keyframe: ~"@{pre}@@{vendor}keyframes @{name} {@{newline}0%";
        @{keyframe} {
            top: @pxFrom;  
            opacity: 0;  
        }    
        100%  { 
            top: @pxTo;
            opacity: 1;
        }    
        .Local(){}
        .Local() when (@post=1) {
            @local: ~"}@{newline}@{selector}";
            @{local} {
                -moz-animation: @name;
                -webkit-animation: @name;
                -o-animation: @name;
                -ms-animation: @name;
                animation: @name;
            } 
        }    
        .Local;
    } 
    .Keyframe(""            , 0,    "-moz-");
    .Keyframe(~"}@{newline}", 0, "-webkit-");
    .Keyframe(~"}@{newline}", 0,      "-o-");
    .Keyframe(~"}@{newline}", 0,     "-ms-");
    .Keyframe(~"}@{newline}", 1,         ""); // <-- Vendorless w3
} 
.animation_top("#test", hey, 10px, 100px);

呈现为(注意关键帧内的缩进是一个.这是预期的,因为Less不知道我们在另一个块内,由于手动添加了大括号).

使用LESS版本1.3.3和1.4.0-b1确认以下结果.

$ lessc --version
lessc 1.3.3 (LESS Compiler) [JavaScript]
$ lessc so
@-moz-keyframes hey {
0% {
  top: 10px;
  opacity: 0;
}
100% {
  top: 100px;
  opacity: 1;
}
}
@-webkit-keyframes hey {
0% {
  top: 10px;
  opacity: 0;
}
100% {
  top: 100px;
  opacity: 1;
}
}
@-o-keyframes hey {
0% {
  top: 10px;
  opacity: 0;
}
100% {
  top: 100px;
  opacity: 1;
}
}
@-ms-keyframes hey {
0% {
  top: 10px;
  opacity: 0;
}
100% {
  top: 100px;
  opacity: 1;
}
}
@keyframes hey {
0% {
  top: 10px;
  opacity: 0;
}
100% {
  top: 100px;
  opacity: 1;
}
}
#test {
  -moz-animation: hey;
  -webkit-animation: hey;
  -o-animation: hey;
  -ms-animation: hey;
  animation: hey;
}

最后的说明:

• 产生有效CSS的最短假人是/**/.示例:(~"..") {/**/}- > .. {/**/}.

Answer 2

1.7版本现在支持更好的方法:

MIXIN

.keyframes(@name) { 
    @-webkit-keyframes @name {
        .-frames(-webkit-);
    }
    @-moz-keyframes @name {
        .-frames(-moz-);
    }
    @keyframes @name {
        .-frames();
    }
}

INPUT

& {
    .keyframes(testanimation);.-frames(@-...){
        0% {
            left: 0;
            @{-}transform: translate(10px, 20px);
        }

        100% {
            left: 100%;
            @{-}transform: translate(100px, 200px);
        }
    }
}

Answer 3

也许这就是你想要的？如果你定义@name: "ANIM_NAME";那么我想这就是方式：

@-moz-keyframes @{name} {
...
...
}