Less 是一种 CSS 预处理器，它扩展了 CSS 的功能，使得样式表的编写更加简洁、高效和可维护。通过引入变量、嵌套规则、运算符等功能，Less 让开发者能够更方便地管理复杂的样式。
变量
在 Less 中，可以使用变量来存储和复用颜色值、字体大小等属性值，从而简化代码并提高其可维护性。定义变量时需要使用 @ 符号：
// www.javascriptcn.com code example
@primary-color: #3498db;
@secondary-color: #2ecc71;
body {
background-color: @primary-color;
}
.button {
color: @secondary-color;
}在这个例子中，@primary-color 和 @secondary-color 就是变量，它们被用来设置不同的 CSS 属性值。
混合
混合允许你将一组 CSS 属性定义为一个类或一个 ID，然后可以在其他地方引用这些属性，从而避免重复代码。这有助于保持代码的整洁和一致性。
// www.javascriptcn.com code example
.mixing {
font-size: 16px;
color: #fff;
}
.header {
.mixing;
}
.footer {
.mixing;
}这里，.mixing 类中的所有属性都会被应用到 .header 和 .footer 中，而不需要重复书写相同的 CSS 代码。
嵌套规则
Less 允许你将选择器嵌套在一起，这样可以使你的 CSS 结构更加清晰，也更容易理解和维护。
// www.javascriptcn.com code example
.navbar {
.nav-item {
display: inline-block;
padding: 10px;
a {
text-decoration: none;
color: #333;
}
}
}在这个例子中，.navbar .nav-item a 的 CSS 规则被自动展开为 .navbar .nav-item a { ... }。
函数和运算符
Less 支持基本的数学运算（加减乘除），还可以使用函数来处理颜色和单位转换等。这使得编写动态的、响应式的 CSS 更加容易。
// www.javascriptcn.com code example
@base-font-size: 16px;
@ratio: 1.5;
html {
font-size: @base-font-size * @ratio;
}
.color {
background-color: darken(#ffffff, 10%);
}在这个例子中，font-size 的计算结果会根据浏览器窗口的大小而变化，而 darken() 函数用于改变颜色的亮度。
导入其他 Less 文件
Less 支持导入其他 Less 文件，这使得你可以将样式分成多个文件，按需组织和引用。这对于大型项目尤其有用，可以帮助保持项目的整洁和模块化。
// main.less
@import "variables";
@import "mixins";
@import "reset";
body {
font-family: Arial, sans-serif;
}在这个例子中，main.less 文件导入了三个其他 Less 文件：variables、mixins 和 reset。这些文件可能包含了不同类型的样式规则，如变量定义、混合类等。
以上就是 Less 的一些基础概念和用法。通过学习这些知识，你将能够更好地利用 Less 来编写高效的 CSS 代码。在实际项目中，Less 的强大功能将帮助你更轻松地管理和维护复杂的样式表。