less嵌套规则（nested-rules）

一：概念

嵌套规则：模仿了HTML的结构，让我们的css代码更加简洁明了清晰

二：实例解析

1. 基本的嵌套规则

• 小例子
  less文件

header{
    width: 960px;
    height: 50px;
    h1{
        color: yellow;
        margin: 0 auto;
    }
    .logo{
        width: 100px;
    }
}

编译后的css文件

header {
  width: 960px;
  height: 50px;
}
header h1 {
  color: yellow;
  margin: 0 auto;
}
header .logo {
  width: 100px;
}

2. 父元素选择器&

• 概念：&表示当前选择器的所有父选择器
• 小例子
  less文件

header{
    .logo{
        &:hover{
            background-color: red;
        }
    }
}

编译后的css文件

header .logo:hover {
  background-color: red;
}

&:hover就代表了所有父元素header .logo

3. 改变选择器的顺序

• 概念：把&符号放在当前选择器之后，就会将当前选择器插入到所有的父选择器之前
• 小例子
  less文件（注意观察三者的区别）

.a{
    .b{
        .c{
            color: #ccc;
        }
    }
}
.a{
    .b{
        .c &{
            color: red;
        }
    }
}
.a{
    .b{
        & .c{
            color: green;
        }
    }
}

编译后的css文件

.a .b .c {
  color: #ccc;
}
.c .a .b {
  color: red;
}
.a .b .c {
  color: green;
}

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

• 小例子
  less文件

p, a, ul, li{
    & &{
        color: red;
    }
}

编译后的css文件

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 {
  color: red;
}