Question

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

我的LESS样式表有效以下是我在页面中调用它的方式：

<!-- 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;
}

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

这就是我被困的地方：

/* 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-， - emz - ， - o - ， - ms-）。
这不是问题。

以下是我在控制台中遇到的错误：

«无法识别的输入»。

Arrrg ......什么？！？在这些动画时机上不能使用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而不是@{variable}。（指示正确的词？dunno）

LESS css变量可能性/限制/语法用法

1 个答案: