css - 使用 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
Support for the (~"@{varname}") selector will be removed in LESS 1.4.0.
To get the original solution to work, just introduce a temporary variable and make use of selector interpolation (new in LESS 1.3.1).
For the previous example, this would be:

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

The explanation below still uses the old selector, because it's conciser. And as shown before, replacing the old method with the new method is trivial.
I did update the code example though, because lots of us blindly copy-paste code.

预期的语法是 (vendorprefixed) (~"@keyframes @{name}") { ... }。但是，输出不正确(选择器合并为 @keyframes name 0% { ... } @keyframes name 100% {})，因为 @keyframes 的树语法> 在 less ^{Source code} 中被定义为异常.

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

• 初始选择器将是 (~"@keyframes @{name}{") { ... }。
  这呈现为:@keyframes name {{ ... }
• 由于 {{ 看起来不太好，我添加了一个换行符。我无法直接转义换行符，所以我决定创建一个变量 @newline: `"\n"`;。减 parses anything between backticks as JavaScript , 所以结果值是一个换行符。由于 { ... } 要求“选择器”有效，我们选择动画的第一步，0%。
• 大括号不匹配。为了解决这个问题，我们可以在最后添加一个虚拟选择器，它以 (~"} dummy") { .. } 开头。这很丑陋，因为添加了一个无用的选择器。
  但是等等，我们已经知道将按顺序添加特定于供应商的前缀。因此，让最终的第一个选择器为 (~"@{pre}@@{vendor}keyframes @{name} {@{newline}0%")。
  @{pre} 必须是 "}@{newline}"，对于第一个 之后的每个关键帧 block 。
• 现在我们已经处理了除最后一个 block 之外的每个 block 的右大括号。我们不必使用无用的虚拟选择器，因为我们显然定义了关键帧以便使用它们。 animation-name是这样做的属性(property)。我正在使用 guarded 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 不知道我们在另一个 block 内)。

使用 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 的最短虚拟代码是 /**/。示例:(~"..") {/**/} -> .. {/**/}。