LESS 是一种动态样式表语言，是 CSS 的一种扩展，可以简化 CSS 的开发方式。它提供了许多功能，如变量、嵌套、混合等，这使得样式表的编写更加灵活和有效率。
变量
使用变量可以提高代码的可维护性和复用性。在 LESS 中，通过 @ 符号定义变量，例如：
@primary-color: #428bca;
.btn {
color: @primary-color;
}这里定义了一个名为 primary-color 的变量，值为 #428bca。在 .btn 中使用 @primary-color 可以让颜色更易于修改，而不用一个个更改。
嵌套
通过嵌套，可以让样式表更加易于阅读和理解。例如：
-- -------------------- ---- -------
------ -
-- -
---------- -----
-
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
------------- -----
- -
------ -----
---------------- -----
------- -
---------------- ----------
-
-
-
-
-
-这里可以清晰地看到每个元素的样式属性，不用再去查找它们所属的父元素。
混合
通过混合，可以将通用的样式集中在一处，以便重复使用。例如：
-- -------------------- ---- ------- ----------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - -------------------- -
这里定义了一个名为 border-radius 的混合，它接受一个参数 @radius。在 .btn 中使用 .border-radius(5px) 可以将圆角属性应用于按钮上。
继承
通过继承，可以让样式表更加简洁和易于维护。例如：
.error {
color: red;
}
.warning {
@extend .error;
font-weight: bold;
}这里 .warning 继承了 .error 的样式，同时又增加了 font-weight 属性。这样可以减少重复的代码，并且在修改时更方便。
运算
通过运算，可以根据需要进行数值计算。例如：
@base: 10px;
@height: @base * 2;
#header {
height: @height;
}这里定义了一个名为 base 的变量，值为 10px。然后通过 @height 计算得到 20px，最后应用于 #header 元素上。
总结
LESS 为前端开发提供了很多方便的功能，包括变量、嵌套、混合、继承和运算。使用这些功能可以提高代码的可读性、可维护性和复用性，从而更好地完成开发任务。希望这篇文章能够帮助大家更好地了解 LESS 的基本语法和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b5c160add4f0e0ffe7ff68