LESS嵌套规则与运算

1. 嵌套规则

（1）什么是嵌套规则：嵌套规则模仿了 HTML 的结构，让 CSS 代码更简洁明了

（2）示例：

• less 文件

#header{
    color:red;
    .nav{
        font-size:16px;
    }
    .logo{
        width:300px;
    }
}

• 编译后的 css 文件

#header {
    color: red;
}
#header .nav {
    font-size: 16px;
}
#header .logo {
    width: 300px;
}

2. 改变选择器的顺序

（1）说明：将&放到当前选择器之后，就会将当前的选择器插入到所有的父选择器之前

（2）示例：

• less 文件

ul{
    li{
        .conter &{
            background:red;
            width:200px;
            height:200px;
        }
    }
}

• 编译后 css 文件

.conter ul li {
    background: red;
    width: 200px;
    height: 200px;
}

3. 组合使用生成所有可能的选择器列表

• less 文件

p,a,ul,li{
    border-top:2px solid red;
    & &{
        border-top:0;
    }
}

• 编译后 css 文件

p,a,ul,li {
    border-top: 2px solid red;
}
p p,p a,p ul,p li,a p,a a,a ul,a li,ul p,ul a,ul ul,ul li,li p,li a,li ul,li li {
    border-top: 0;
}

4. 运算

（1）说明：任何数值、颜色和变量都可以进行运算

（2）数值型运算：less 会自动推断数值的单位，所以不必每个值都加上单位

（3）示例：

• less 文件

.wp{
    width: 450px+450;
}

• 编译后的 css 文件

.wp {
    width: 900px;
}

5. 颜色值运算

（1）less 在运算时，先将颜色值转换为 rgb 模式，然后在转换为 16 进制的颜色值并且返
回
（2）示例

• less 文件

.content{
    background:#000000 + 21;
}

• 编译后的 css 文件

.content {
    background: #151515;
}

注意：既然是转换为 rgb 模式，由于 rgb 的取值范围是 0~255，所以计算时不能超过这个区间，超过默认使用最大值 255 计算，同时不能使用颜色名称（如：red、green等）进行计算