LESS 中如何在不同环境下使用不同变量
LESS 是一种 CSS 预处理器，它为 CSS 提供了许多扩展功能，如变量、嵌套、混合、函数等。其中，变量是 LESS 中最常用的功能之一，可以用来存储颜色、字体、尺寸等常用的 CSS 属性值，方便在样式表中多次使用。
但是，在实际开发中，我们可能会遇到需要在不同环境下使用不同变量的情况，比如在开发环境中使用一组变量，在生产环境中使用另一组变量。本文将介绍如何在 LESS 中实现这一功能。
- 使用 @import 导入不同的变量文件
LESS 中可以使用 @import 导入其他 LESS 文件，因此我们可以将不同环境下的变量定义在不同的文件中，并在需要的地方导入。
例如，我们可以将开发环境下的变量定义在 dev.less 文件中，生产环境下的变量定义在 prod.less 文件中。然后，在样式表中，根据当前环境导入相应的文件即可。
// dev.less @bg-color: #f0f0f0; @text-color: #333;
// prod.less @bg-color: #fff; @text-color: #666;
// style.less @import "dev.less"; // 开发环境 // @import "prod.less"; // 生产环境
body { background-color: @bg-color; color: @text-color; }
在开发环境中，我们将 dev.less 文件导入到 style.less 文件中，样式表中的变量将使用 dev.less 中定义的值；在生产环境中，我们将 prod.less 文件导入到 style.less 文件中，样式表中的变量将使用 prod.less 中定义的值。
- 使用 JavaScript 动态生成变量
除了使用 @import 导入不同的文件外，我们还可以使用 JavaScript 动态生成变量。这种方法比较灵活，可以根据需要在不同的环境下生成不同的变量。
例如，我们可以在样式表中定义一个名为 env 的变量，然后使用 JavaScript 判断当前环境，根据环境生成不同的变量，最后将变量的值赋给 env 变量。
// style.less @env: {};
// 开发环境 & when (default()) { @env: { bg-color: #f0f0f0; text-color: #333; }; }
// 生产环境 & when (not default()) { @env: { bg-color: #fff; text-color: #666; }; }
body { background-color: @env.bg-color; color: @env.text-color; }
在开发环境中，我们使用 & when (default()) 语法生成变量，并将变量的值赋给 env 变量；在生产环境中，我们使用 & when (not default()) 语法生成变量，并将变量的值赋给 env 变量。
需要注意的是，在使用 JavaScript 动态生成变量时，需要在 LESS 中启用 JavaScript 功能，可以使用 less.js 或者 webpack 等工具实现。
总结
在实际开发中，我们可能会遇到需要在不同环境下使用不同变量的情况。LESS 提供了多种实现方式，如使用 @import 导入不同的文件，使用 JavaScript 动态生成变量等。不同的方式各有优缺点，需要根据实际情况选择合适的方式。在使用 JavaScript 动态生成变量时，需要注意在 LESS 中启用 JavaScript 功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658b8f37eb4cecbf2d0cca6b