LESS css 变量 possibilities/restrictions/syntax 用法

Question

我刚好在 2 小时前开始使用 LESS 库。
（在成功 种 Hello World 之后计算时间）

我的 LESS 风格 sheet 有效.
以下是我在页面中的调用方式：

<!-- LESS CSS -->
<link rel="stylesheet/less" type="text/css" href="myLessCssStyle.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.js"></script>

我在单个 CSS 值上创建了一个 Hello world 的等价物，易于验证：

@testDisplay: none;

#bigVisibleElement{
    display: @testDisplay;
}

成功！
对此感到高兴，因为它几乎太容易了...
我开始在我正在研究的小型测试样式 sheet 中实现这个 重要的变量处理优势 。

这就是我卡住的地方：

/* my LESS vars definition */

@Bes_ease_in_finish: 10%;
@Bes_ease_out_begin: 80%;
@Bes_ease_out_finish: 90%;

/* A couple more lines that includes other working LESS vars... */

/* This is bugging here. On the first LESS var. */
@keyframes KeyFrame_Bes_Web { 
    0% { opacity: 0; animation-timing-function: ease_in; }
    @Bes_ease_in_finish { opacity: 1; }                      /* <--- Line 75 is here. */
    @Bes_ease_out_begin { opacity: 1; animation-timing-function: ease-out; }
    @Bes_ease_out_finish { opacity: 0; }
    100% { opacity: 0 }
}

我定义了 @keyframes 的所有其他前缀变体（-webkit-、-moz-、-o-、-ms-）。
这不是问题。

这是我在控制台中得到的错误：

«无法识别的输入»。

啊……什么？！？
不能在这些动画时间上使用 LESS 变量？
为什么？

或者如何？有语法技巧吗？

由于这些令人作呕的前缀，这些时间值在每个动画中重复 5 次...这是一个非常简单的 @keyframes 动画（几个图像的淡入/淡出时间），我显然希望将来变得更复杂。

这就是我寻找 LESS 库的原因。

慢慢来...我希望有一个明确的解释性答案。
或者一些参考链接阅读。
我的房子没有着火。

Answer 1

试试这个：

@keyframes KeyFrame_Bes_Web { 
    0% { opacity: 0; animation-timing-function: ease_in; }
    @{Bes_ease_in_finish} { opacity: 1; }                      /* <--- Line 75 is here. */
    @{Bes_ease_out_begin} { opacity: 1; animation-timing-function: ease-out; }
    @{Bes_ease_out_finish} { opacity: 0; }
    100% { opacity: 0 }
}

在使用动态指令时，您应该使用

而不是 @variable。（指令是正确的词吗？不知道）

LESS css 变量 possibilities/restrictions/syntax 用法

LESS css variable possibilities/restrictions/syntax usage

css

var

less