LESS是一种CSS预处理语言，它允许你使用变量、函数、混合和嵌套来编写更加灵活的CSS代码。LESS嵌套规则是LESS中最强大的特性之一，它允许你在一个选择器中嵌套另一个选择器，从而使你的CSS代码更加简洁。
LESS嵌套规则的语法很简单：在一个选择器中写另一个选择器：
#header {
h1 {
font-size: 20px;
}
}
上面的代码将会生成以下CSS代码：
#header h1 {
font-size: 20px;
}
LESS还允许你在一个选择器中使用&来引用上一级选择器：
.button {
&:hover { // & 将会被替换成 .button
background-color: #ccc;
}
&.active { // & 将会被替换成 .button
background-color: #999;
}
span { // 嵌套span标签
&:before { // & 将会被替换成 .button span
content: "";
}
} }
上面的代码将会生成以下CSS代码：
.button:hover { // 替换&后生成的css代码
background-color: #ccc;
}
.button.active { // 替换&后生成的css代码
background-color: #999;
}
.button span:before { // 替换&后生成的css代码
content:"";
} 使用 extend 选择器匹配嵌套选择器。
下面的例子演示了在LESS文件中使用扩展嵌套选择器：
<!doctype html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div class="style"> <h3>Hello!!!!!</h3> </div> <p class="img">Welcome to </p> </body> </html>
接下来，创建文件 style.less
.style {
h3{
color: #BF70A5;
font-size: 30px;
}
}
.img:extend(.style h3){}
您可以使用以下命令将 style.less 文件编译为 style.css ：
lessc style.less style.css
接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件：
.style h3,
.img {
color: #BF70A5;
font-size: 30px;
}
让我们执行以下步骤，看看上面的代码如何工作：
将上述html代码保存在 extend_syntax.htm 文件中。
在浏览器中打开此HTML文件，将显示如下输出。
描述每当一个mixin定义在另一个mixin中时，它也可以用作返回值。例子下面的示例演示了如何在LESS文件中使用mixin htmlheadlink r...
描述可选允许您在文件不存在时导入文件。 如果要导入的文件不存在并且未使用可选关键字，则LESS会抛出 FileError 错误并停止编译...
描述Data-uri是统一资源标识符(URI)模式，其在网页中嵌入资源。 当没有给出MIME类型时，节点使用mime包来控制正确的MIME类型。参...
描述它降低了元素中颜色的亮度。 它有以下参数： color ：它代表颜色对象。amount ：它包含0-100%之间的百分比。 方法：它是可选...
描述它丢弃来自中所选元素的颜色饱和度。它具有以下参数︰ color ：它代表一个颜色对象。例子下面的示例演示了在LESS文件中使用...
描述 average 函数计算每个通道(RGB)的两种输入颜色的平均值。参数： color1：颜色对象。 color2：颜色对象。返回：颜色。例子下...
描述分离的规则集包含一个普通的规则集，如属性，嵌套规则集，变量声明，mixins等。它存储在一个变量中，并包含到其他结构中，其...
