@使用LESS CSS的CSS关键帧中的符号和变量 [英] @ sign and variables in CSS keyframes using LESS CSS
问题描述
我需要8种不同的CSS3动画，这些动画太相似，所以我用了LESS。以下是代码，它完美地工作，有一点小故障 - @name变量。
I'm in need of 8 different CSS3 animations which are way too similar, so I used LESS for it. Below is the code, that works perfectly, with one little glitch - the @name variable.
.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关键帧是由@ sign，LESS只是忽略@name的变量。有没有办法逃避关键帧@符号或强制LESS以某种方式呈现@name正确？
Because css keyframes are started by @ sign, LESS simply ignores the variable of @name. Is there any way how to escape the keyframe @ sign OR to force LESS to somehow render @name properly?
推荐答案
编辑
支持（〜@ {varname}）选择器将在LESS中删除1.4.0。
要获取原始解决方案，只需引入一个临时变量并使用选择插值（LESS 1.3.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 源代码 。
The expected syntax is (vendorprefixed) (~"@keyframes @{name}") { ... }. However, the output is incorrect (selectors are merged to @keyframes name 0% { ... } @keyframes name 100% {}), because the tree syntax of @keyframes is defined as an exception in less Source code.
我的crafty mixin背后的想法是添加花括号通过选择器。
The idea behind my crafty mixin is to add curly braces through selectors.
- 初始选择器将为
（〜@keyframes @ {name} {）{。 ..}。
这将呈现为：@keyframes name {{...} - 由于
{{看起来不好，我添加一个换行符。我无法直接跳过换行符，所以我决定创建一个变量@newline：&＃x60;\\\。较少在脚本之间解析JavaScript之间的任何东西，因此结果值是换行符。由于
&＃x60 ;;{...}需要一个选择器才能生效，我们选择动画的第一步，0％。 - 花括号不匹配。为了解决这个问题，我们可以在末尾添加一个虚拟选择器，它以
（〜} dummy）{..}开头。这是丑的，因为添加了一个无用的选择器。
但是等待，我们已经知道要按顺序添加供应商特定的前缀。所以，最后的第一个选择器是（〜@ {pre} @@ {vendor} keyframes @ {name} {@ {newline} 0％）。 >
@ {pre}必须为每个关键帧块} @ {newline}em>之后第一个。 - 现在我们处理了除了最后一个之外的每个块的关闭大括号。我们不必使用无用的虚拟选择器，因为我们明确地定义了关键帧以便使用它们。
动画名称是属于这样做的财产。我正在使用 guarded mixin 来实现这一点。
- The initial selector will be
(~"@keyframes @{name}{") { ... }.
This renders as:@keyframes name {{ ... } - Since
{{does not look well, I add a newline. I was not able to escape the newline directly, so I decided to create a variable@newline: `"\n"`;. Less parses anything between backticks as JavaScript, so the resulting value is a newline character. Since{ ... }requires a "selector" to be valid, we pick the first step of the animation,0%. - The curly braces do not match. To fix this, we can add a dummy selector in the end, which starts with
(~"} dummy") { .. }. This is ugly, because a useless selector is added.
But wait, we already know that vendor-specific prefixes are going to be added in sequence. So, let the final first selector be(~"@{pre}@@{vendor}keyframes @{name} {@{newline}0%").
@{pre}has to be"}@{newline}"for every keyframes block after the first one. - Now we've dealt with the closing curly brace for every block except for the last one. We do not have to use a useless dummy selector, since we obviously define keyframes in order to use them.
animation-nameis the property to do so. I'm using a guarded mixin to implement this.
解决方案可能看起来有点尴尬，但它很简洁。
The solution may look somewhat awkward at first, but it's quite concise.
@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);
呈现为（注意关键帧内的缩进是关闭的，这是预期的，因为更少的不知道我们在另一个区块，由于手动添加的大括号）。
Is rendered as (notice that the indention inside the keyframes are off by one. This is expected, because Less does not know that we're inside another block, due to the manually added braces).
以下结果使用LESS版本1.3.3和1.4.0进行确认-b1。
The following result is confirmed using LESS version 1.3.3 and 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的最短的虚拟值是
/ ** /。示例：（〜..）{/ ** /}- >.. {/ ** /}。
- The shortest dummy which produces valid CSS is
/**/. Example:(~"..") {/**/}->.. {/**/}.
这篇关于@使用LESS CSS的CSS关键帧中的符号和变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
