在 LESS 中使用变量定义动画效果的方法
LESS 是一种 CSS 预处理器，它可以让我们使用变量、函数、嵌套等更加强大的特性来编写 CSS。在 LESS 中定义动画效果，我们可以使用变量来实现动画效果的复用和维护。
LESS 变量
LESS 变量可以用来存储任何类型的值，例如颜色、字体大小、边距等。在 LESS 中定义变量需要使用 @ 符号，如下所示：
@primary-color: #009688; @font-size: 14px;
LESS 动画
LESS 中的动画使用 @keyframes 定义，如下所示：
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}上面的代码定义了一个名为 rotate 的动画，从 0 度旋转到 360 度。我们可以通过 animation 属性来使用这个动画：
.element {
animation: rotate 2s linear infinite;
}上面的代码让 .element 元素使用 rotate 动画，持续时间为 2 秒，线性变化，无限循环。
使用变量定义动画
在 LESS 中，我们可以使用变量来定义动画，以实现动画效果的复用和维护。例如，我们可以定义一个名为 rotate 的变量来存储旋转动画：
@rotate: {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
};注意，这里使用了花括号 {} 来定义变量，表示这个变量是一个对象，可以包含多个属性。上面的代码定义了一个名为 rotate 的变量，它的值是一个包含 from 和 to 两个属性的对象，分别表示动画开始和结束时的样式。
接着，我们可以使用 @rotate 变量来定义动画：
.element {
animation: @rotate 2s linear infinite;
}上面的代码使用了 @rotate 变量来定义动画，效果和之前的代码是一样的。如果我们需要修改动画效果，只需要修改一次 @rotate 变量即可，所有使用了这个变量的地方都会自动更新。
示例代码
下面是一个完整的示例代码，演示了如何在 LESS 中使用变量定义动画效果：
-- -------------------- ---- -------
-------- -
---- -
---------- -------------
-
-- -
---------- ---------------
-
--
-------- -
---------- ------- -- ------ ---------
-上面的代码定义了一个名为 rotate 的变量，存储了旋转动画的样式。然后，我们使用 @rotate 变量来定义 .element 元素的动画效果，持续时间为 2 秒，线性变化，无限循环。
总结
在 LESS 中使用变量定义动画效果，可以实现动画效果的复用和维护。我们可以将动画的样式存储在变量中，然后在需要使用动画的地方使用变量来定义动画效果。这样，如果需要修改动画效果，只需要修改一次变量即可，所有使用了这个变量的地方都会自动更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f27da02b3ccec22fb12e13