LESS 是一种 CSS 预处理器，它允许我们使用像变量、嵌套、Mixins等功能进行更为灵活和简便的 CSS 编写。其中，变量是使用最多的功能之一。本文将深入探讨在 LESS 中使用变量的技巧，帮助你更好地编写高性能的 CSS 代码。
定义变量
在 LESS 中，我们可以使用 @ 符号来定义变量，如下所示：
@primary-color: #007bff;
其中，我们定义了一个名为 primary-color 的变量，它的值为 #007bff，代表蓝色。我们可以根据需要定义多个变量，来管理我们的样式。
使用变量
使用变量时，我们需要使用 @ 符号来引用该变量，如下所示：
.btn-primary {
background-color: @primary-color;
}这里我们将 .btn-primary 的背景色设置为了 primary-color。该背景颜色将取决于我们所定义的变量值。
变量插值
在某些情况下，我们可能需要在字符串或选择器中引用变量。这时我们可以使用变量插值方式，如下所示：
@my-class: test;
.@{my-class} {
color: @primary-color;
}在上面的代码中，我们使用了变量插值方法 @{}，来生成 .test 类选择器。该选择器将继承 primary-color 变量的颜色定义。
变量计算
在 LESS 中，我们也可以对变量进行计算。例如：
@base-font-size: 16px;
@type-scale: 1.5;
@h1-font-size: @base-font-size * @type-scale;
h1 {
font-size: @h1-font-size;
}在上面的代码中，我们使用了 * 符号将 base-font-size 乘以 type-scale，来计算出 h1-font-size 的值。最后我们将 h1 的字体大小设置为了计算得到的 h1-font-size 的值。
命名变量
在定义变量时，我们需要遵守一些命名规则，以保证代码的可读性和一致性。以下是一些有效的变量命名规则：
- 采用小驼峰命名法，如
primaryColor - 明确变量的用途，如
brandColor、linkColor - 对于常量变量，使用全大写命名法，如
PI
继承变量
在 LESS 中，我们还可以使用一个变量继承另外一个变量的值，如下所示：
@brand-color: #007bff; @hover-color: @brand-color;
在上面的代码中，我们定义了 brand-color 变量，并将 hover-color 设置为其继承，这意味着 hover-color 将与 brand-color 具有相同的颜色值。
总结
在 LESS 中使用变量是一个非常有用和实用的技术。它可以让你在编写 CSS 时更加灵活和高效，同时可以使你的代码更为可读和维护。本文详细介绍了如何定义、使用、计算和命名变量，以及如何使用变量继承，希望能对你在前端开发中使用 LESS 有所帮助。
参考示例代码：
-- -------------------- ---- -------
------------- --------
-------------- ----- ------ -----------
--------------- -------------
----------------- --------
-- ------- -----
------------------ -
------------------- ------
----------- ------
-
-- ------- ---------
--------- -------
--------- -----
--------- --------
--------- -------
--------- --------
--------- -----
-- ------- ---
--- --- --- --- --- -- -
------------ --------------
------------ -----
--------------- ------
--------------- ----------
-
-- -
---------- ---------
------ ---------------
-
-- -
---------- ---------
------ -----------------
-
-- -
---------- ---------
-
-- -
---------- ---------
-
-- -
---------- ---------
-
-- -
---------- ---------
-
---- -
-------- -------------
-------- ----- -----
---------- -----
------------ -----
------ -----
----------- -------
--------------- ----------
---------------- -----
----------------- ---------------
------------ - - ---- ------- -- -- ----
-------------------------
------- -
----------------- -----------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653660977d4982a6ebe6cde5