【less】嵌套

微信订阅号：Rabbit_svip

less的嵌套是可能是在开发过程中用得最多的一个神技了。容易上手，容易书写。

先来看看 html 结构，大概就懂什么是嵌套了

    <ul>
        <li>
            <a href="#">链接1</a>
        </li>
        <li>
            <a href="#">链接2</a>
        </li>
        <li>
            <a href="#">链接3</a>
        </li>
    </ul>

可以看到，上面的 html 结构是 ul 包括这 li ， li 包括这 a 。

less代码添加样式

ul {
    margin: 0;

    li {
        float: left;
        list-style-type: none;
        width: 30px;

        a {
            text-decoration: none;
            color: aquamarine;
        }
    }
}

转换后的css代码

ul {
    margin: 0;
}
ul li {
    float: left;
    list-style-type: none;
    width: 30px;
}
ul li a {
    text-decoration: none;
    color: aquamarine;
}

可以看出，css 的样式是有嵌套关系的。

而在 less 中，书写的时候，直接把子级元素写在父级元素里面就行。