LESS 是一种 CSS 预处理器，它允许开发者使用类似编程语言的语法来生成 CSS 样式。虽然 LESS 本身已经具备了很多方便的语法和功能，但有时候我们还需要使用 JavaScript 来处理一些复杂的逻辑或者动态生成样式。本文将介绍如何在 LESS 中使用 JavaScript，以及如何通过 JavaScript 生成动态样式。
在 LESS 中使用 JavaScript
LESS 支持使用 JavaScript 代码，并且提供了 ~ 符号来引入 JavaScript 代码。例如，我们可以在 LESS 中使用 JavaScript 的 Math 对象来计算一个元素的宽度：
@width: ~`Math.floor(Math.random() * 100) + 1`%;
在上面的代码中，~ 符号告诉 LESS 这是一段 JavaScript 代码，而后面的代码则使用了 JavaScript 的 Math 对象来生成一个随机的宽度值。
除了使用 ~ 符号，我们还可以使用 @{} 语法来引用 JavaScript 变量或者表达式。例如，我们可以定义一个 JavaScript 变量 color，并将其用于 LESS 的颜色变量：
@color: `'#' + (Math.random() * 0xFFFFFF << 0).toString(16)`;
background-color: @{color};在上面的代码中，我们使用 JavaScript 的随机数生成一个颜色值，并将其赋值给 LESS 的 @color 变量。然后我们使用 @{} 语法将 @color 变量用于 background-color 属性。
通过 JavaScript 生成动态样式
除了在 LESS 中使用 JavaScript，我们还可以通过 JavaScript 生成动态样式。这种方法可以让我们根据不同的条件生成不同的样式，或者根据用户的操作动态修改样式。
在 JavaScript 中，我们可以使用 document.createElement 方法来创建一个新的元素，并使用 element.style 属性来设置元素的样式。例如，下面的代码会创建一个新的 div 元素，并将其背景颜色设置为随机生成的颜色：
var div = document.createElement('div');
div.style.backgroundColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
document.body.appendChild(div);在上面的代码中，我们使用 JavaScript 的 Math 对象生成一个随机的颜色值，并将其设置为 div 元素的背景颜色。然后我们使用 document.body.appendChild 方法将 div 元素添加到页面中。
如果我们想要在 LESS 中使用这种方法生成动态样式，可以使用 ~ 符号将 JavaScript 代码嵌入到 LESS 中。例如，下面的代码会生成一个随机颜色的 div 元素：
@color: ~`'#' + (Math.random() * 0xFFFFFF << 0).toString(16)`;
div {
background-color: @color;
}在上面的代码中，我们使用 JavaScript 的随机数生成一个颜色值，并将其赋值给 LESS 的 @color 变量。然后我们使用 LESS 的变量语法将 @color 变量用于 background-color 属性。
结论
在 LESS 中使用 JavaScript 可以让我们更加方便地处理复杂的逻辑或者动态生成样式。通过本文的介绍，你应该已经掌握了在 LESS 中使用 JavaScript 的方法，并了解了如何通过 JavaScript 生成动态样式。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6777f12bc1c5215e3cbef491