LESS 是一个动态样式语言，它扩展了 CSS，并且使得样式表更易于维护和扩展。其中，变量是 LESS 中最常见的一个功能。在本文中，我们将深入探讨 LESS 中变量定义的技巧以及推荐的写法。
变量的定义
在 LESS 中，变量的定义使用 @ 符号。例如，定义一个变量 color：
@color: #333;
变量的使用也很简单，只需要在相应的位置使用 @color 即可：
body {
background-color: @color;
}变量的作用域
变量的作用域是指变量在 LESS 文件中生效的范围。在 LESS 中，变量的作用域分为全局作用域和局部作用域。
全局作用域的变量可以在整个 LESS 文件中使用，而局部作用域的变量只能在定义它的代码块中使用。例如：
// javascriptcn.com 代码示例
@color: #333; // 全局变量
body {
@color: #fff; // 局部变量
background-color: @color;
}
h1 {
color: @color; // 使用全局变量
}上面的代码中，@color 变量在全局作用域中定义，然后在 body 代码块中定义了一个同名的局部变量。在 body 中，background-color 使用的是局部变量，而在 h1 中，color 使用的是全局变量。
变量的默认值
在 LESS 中，我们可以给变量设置默认值。如果在使用变量时没有给它赋值，那么它就会使用默认值。例如：
// javascriptcn.com 代码示例
@color: #333;
@background-color: @color;
body {
background-color: @background-color;
}
h1 {
background-color: @background-color; // 使用默认值
}上面的代码中，@background-color 变量使用了 @color 变量的值作为默认值。在 body 中，@background-color 使用了 @color 的值，而在 h1 中，由于没有给 @background-color 赋值，所以使用默认值。
变量的计算
在 LESS 中，变量可以进行简单的计算。例如：
@width: 100px;
@height: @width / 2;
.box {
width: @width;
height: @height;
}上面的代码中，@height 变量使用了 @width 变量的值进行计算。在 .box 中，width 使用了 @width 的值，height 使用了 @height 的值。
推荐的写法
在 LESS 中，变量的定义和使用非常灵活。但在实际开发中，为了使代码更易读、易维护，我们应该遵循一些规范。
首先，应该将变量的定义放在文件的开头，这样可以方便其他人阅读代码。其次，变量的命名应该具有可读性和表达力，不要使用过于简短或过于抽象的名称。最后，应该尽量避免定义过多的全局变量，以免造成变量名冲突或者变量被误用的情况。
例如，下面是一段推荐的 LESS 代码：
// javascriptcn.com 代码示例
// 变量定义
@primary-color: #007bff;
@secondary-color: #6c757d;
@border-color: #dee2e6;
// 样式定义
body {
color: @secondary-color;
background-color: #f8f9fa;
}
h1, h2, h3, h4, h5, h6 {
color: @primary-color;
}
.btn {
display: inline-block;
padding: 0.5rem 1rem;
background-color: @primary-color;
border: 1px solid @border-color;
color: #fff;
text-decoration: none;
cursor: pointer;
&:hover {
background-color: darken(@primary-color, 10%);
}
}上面的代码中，变量的定义放在了文件的开头，命名具有可读性和表达力。样式定义中，使用了全局变量，但是变量的数量较少，不容易引起冲突或被误用。
总结
LESS 中变量的定义和使用非常灵活，但在实际开发中，我们应该遵循一些规范，以使代码更易读、易维护。我们应该注意变量的作用域、默认值、计算等特性，并避免定义过多的全局变量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6559e1e7d2f5e1655d44c2c6