什么是 Less？
Less 是一种 CSS 预处理器，它提供了许多便利的功能，例如变量、函数、混合等等。Less 可以让 CSS 更加易于维护和扩展，因为它允许你使用变量来存储重复使用的值，使用函数来处理复杂的计算，使用混合来减少代码的冗余等等。
什么是 % 变量？
在 Less 中，% 变量是一种特殊的变量，它可以被用来定义一个不会被编译成 CSS 的占位符。% 变量可以被用来定义一些基础的样式，然后在需要的时候被引用。这样可以减少 CSS 文件的大小，同时也可以提高代码的可读性和可维护性。
如何使用 % 变量？
使用 % 变量非常简单，只需要在定义变量时，在变量名前面加上 % 符号即可。例如：
%my-color {
color: red;
}
.my-class {
@extend %my-color;
}在上面的例子中，我们定义了一个名为 %my-color 的占位符变量，它包含了一个 color 属性。然后我们定义了一个名为 .my-class 的类选择器，它通过 @extend 指令继承了 %my-color 变量。这样，.my-class 类选择器就会包含了 color: red; 这个属性。
% 变量的优势
使用 % 变量有许多优势。首先，它可以提高代码的可读性和可维护性。因为你可以将一些基础的样式定义为占位符变量，然后在需要的地方使用 @extend 指令来继承这些样式。这样可以减少代码的冗余，并且使代码更加简洁和易于维护。
其次，使用 % 变量可以提高 CSS 文件的性能。因为占位符变量不会被编译成 CSS，所以它们不会增加 CSS 文件的大小。这样可以减少网络传输的时间，从而提高网站的加载速度。
最后，使用 % 变量可以提高代码的重用性。因为占位符变量可以在任何地方被引用，所以它们可以被用来定义一些通用的样式，然后在需要的地方被引用。这样可以减少代码的重复，从而提高代码的可维护性和可扩展性。
示例代码
下面是一个使用 % 变量的示例代码：
-- -------------------- ---- ------- --------- - ------ ---- - ---------- - ------- ---------- ---------- ----- - ---------- - ------- ---------- ---------- ----- -
在上面的代码中，我们定义了一个名为 %my-color 的占位符变量，它包含了一个 color 属性。然后我们定义了两个类选择器 .my-class1 和 .my-class2，它们都继承了 %my-color 变量，并且分别添加了不同的 font-size 属性。这样，.my-class1 类选择器和 .my-class2 类选择器都会包含了 color: red; 这个属性，同时也具有不同的字体大小。
结论
使用 % 变量可以提高代码的可读性、可维护性和性能，并且可以提高代码的重用性。在 Less 中，% 变量是一种非常有用的功能，它可以让我们更加高效地编写 CSS 代码。如果你还没有使用过 % 变量，那么现在就可以尝试一下，并且体验一下它的优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d5773e1dcc5c0fa3b9f8e