LessCSS 语法简介
LessCSS 是一种动态样式表语言，它允许开发者使用变量、函数和运算符来书写 CSS 代码，从而提高了 CSS 的可读性和维护性。下面是 LessCSS 的一些基本语法和特点：
变量
LessCSS 允许使用变量来存储值，这样可以使得代码更简洁易读。例如：
```
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
```
编译后的 CSS 代码为：
```
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
```
组合
LessCSS 还支持组合语法，可以将多个样式组合成一个样式。例如：
```
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
```
编译后的 CSS 代码为：
```
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
```
选择器
LessCSS 还支持选择器语法，可以使用选择器来选择元素并应用样式。例如：
```
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px;
}
}
}
}
```
编译后的 CSS 代码为：
```
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
```
变量运算
LessCSS 还支持变量运算，可以使用变量进行数学运算。例如：
```
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
```
编译后的 CSS 代码为：
```
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
```
Import
LessCSS 还支持 Import 语法，可以将多个 Less 文件合并成一个文件。例如：
```
@import "lib.less";
@import "lib";
```
这样可以将多个 Less 文件合并成一个文件，从而提高了代码的可读性和维护性。
LessCSS 是一种强大且灵活的样式表语言，它可以使得开发者更方便地书写和维护 CSS 代码。但是，LessCSS 也存在一些不足之处，例如不能自动补全 CSS3 的样式 hack，node.js 在 Windows 系统下的支持不够等。
