在前端开发中，我们常常需要使用一些颜色、尺寸等常量，如果每次使用时都手动输入，不仅效率低下，而且容易出错。LESS 提供了定义全局变量的功能，可以大大提高开发效率，减少错误率。
定义全局变量的方法
LESS 中定义全局变量的方法很简单，只需要在样式文件的开头使用 @ 符号定义即可。如下所示：
@primary-color: #1890ff; @font-size: 16px;
定义好全局变量后，我们就可以在样式中使用这些变量，如下所示：
.button {
color: @primary-color;
font-size: @font-size;
}全局变量的作用域
LESS 中定义的全局变量有一个作用域的概念，即在哪个文件中定义的变量只能在该文件及其引用的文件中使用。如果想要在多个文件中使用同一个变量，需要将变量定义在一个单独的文件中，然后在需要使用的文件中引用该文件。
例如，我们可以创建一个 variables.less 文件，将所有的全局变量定义在该文件中：
// variables.less @primary-color: #1890ff; @font-size: 16px;
然后在需要使用这些变量的文件中使用 @import 引入该文件：
// index.less
@import "variables.less";
.button {
color: @primary-color;
font-size: @font-size;
}这样，我们可以在多个样式文件中使用同一个全局变量，方便维护和修改。
带前缀的变量名
有时候，我们需要在 LESS 中定义一些带前缀的变量名，如下所示：
@btn-primary-color: #1890ff; @btn-font-size: 16px;
这样，我们可以在样式中使用 @btn-primary-color 和 @btn-font-size 变量名，但是这样的变量名可能会显得过长，不易阅读和维护。为了解决这个问题，我们可以使用 LESS 的命名空间功能，将变量名组织在一起，如下所示：
-- -------------------- ---- ------- -- ------ ---- - --------------- -------- ----------- ----- - -- ---------- ------- - ------ ------------------- ---------- --------------- -
这样，我们就可以使用 .btn@primary-color 和 .btn@font-size 变量名，既可以防止命名冲突，又可以保持变量名简洁易读。
总结
LESS 中定义全局变量可以提高开发效率，减少错误率。在定义全局变量时，需要注意作用域和命名空间的问题，以便更好地维护和修改代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d8963c1886fbafa464f186