在前端开发中，我们经常需要使用一些可重复使用的样式，例如颜色、字体大小、间距等等。为了方便管理和修改，我们可以使用自定义属性来定义这些样式，并在需要的时候引用它们。在 LESS 中，我们可以使用 --var 声明和 var() 函数来实现这一功能。
--var 声明的基本用法
--var 声明可以让我们定义一个自定义属性，并为它赋一个值。例如，我们可以这样定义一个颜色变量：
----- - ---------------- -------- -
在这个例子中，我们使用了 :root 选择器来定义全局的自定义属性，--primary-color 是我们定义的属性名，#007bff 是属性的值。在定义完自定义属性后，我们可以在任何需要使用它的地方通过 var() 函数来引用它：
------- - ------ --------------------- -
在这个例子中，我们在 .button 类中使用了 var() 函数来引用了我们定义的 --primary-color 变量。这样，当我们需要修改主色调时，只需要修改一处定义即可。
var() 函数的基本用法
var() 函数可以让我们引用已经定义的自定义属性。它的语法非常简单，只需要将属性名作为参数传入即可。例如，我们可以这样使用 var() 函数来引用 --primary-color 变量：
------- - ------ --------------------- -
在这个例子中，我们将 --primary-color 作为参数传入了 var() 函数，这样 .button 类的 color 属性就会被赋值为我们定义的主色调。
var() 函数的高级用法
除了基本用法外，var() 函数还有一些高级用法，可以让我们更加灵活地使用自定义属性。
默认值
在使用 var() 函数时，我们可以为它指定一个默认值。这样，在没有定义该属性时，就会使用默认值。例如：
------- - ------ -------------------- --------- -
在这个例子中，我们将 #007bff 作为默认值传入了 var() 函数。如果我们没有定义 --primary-color 属性，那么 .button 类的 color 属性就会被赋值为 #007bff。
嵌套使用
在 LESS 中，我们可以使用嵌套语法来组织样式。而在使用自定义属性时，我们也可以嵌套使用 var() 函数来引用其他自定义属性。例如：
----- - ---------------- -------- ------------------ --------------------- -
在这个例子中，我们定义了两个自定义属性，--primary-color 和 --secondary-color。在定义 --secondary-color 时，我们使用了 var() 函数来引用了 --primary-color，这样 --secondary-color 就会继承 --primary-color 的值。
总结
使用自定义属性可以让我们更加方便地管理和修改样式。在 LESS 中，我们可以使用 --var 声明和 var() 函数来定义和引用自定义属性。除了基本用法外，var() 函数还有一些高级用法，例如指定默认值和嵌套使用。通过灵活地使用自定义属性，我们可以写出更加简洁、易维护的样式代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66293ad2c9431a720c68f187