less嵌套规则

目录

嵌套语法

优先级：

伪类

指令嵌套

---

嵌套语法

html

<div id="container">
    <section class="left"></section>
    <section class="center"></section>
    <section class="right"></section>
</div>

css

#container {
    width: 500px;
    height: 500px;
    border: 1px solid blue;
    margin: 20px;
}

#container .left,
#container .center,
#container .right {
    width: 100px;
    height: 100px;
}

#container .left {
    background: red;
}

#container .center {
    background: green;
}

#container .right {
    background: blue;
}

将css的样式改为使用less来写的话，是这样的：

#container {
    width: 500px;
    height: 500px;
    border: 1px solid blue;
    margin: 20px;

    .left, .center, .right {
        width: 100px;
        height: 100px;
    }

    .left {
        background: red;
    }

    .center {
        background: green;
    }

    .right {
        background: blue;
    }
}

很明显，使用less来写的话，代码是比较少，并且是比较清晰的，它编译之后，效果是跟前面的css写法一样的。

优先级：

如果相同的class类名的不同元素，在不同的位置时（一个是父元素的子元素，另一个是父元素的兄弟元素），这样的情况下，

子元素里面定义的样式不会被应用到父元素的兄弟元素；

兄弟元素的样式会被应用到父元素的子元素，但前提是父元素的子元素没有该属性的时候才会被应用，如果它自己有该属性，则它自己的属性优先级比较高。

这样说不知道能不能被理解，用实际代码看看吧：

<div id="container">
    <section class="center"></section>
</div>
<div class="center"></div>

#container {
    width: 500px;
    height: 500px;
    border: 1px solid blue;
    margin: 20px;

    .center {
        width: 100px;
        height: 100px;
        background: yellow;
    }
}

.center {
    width: 200px;
    height: 100px;
    background: black;
}

效果如下：

container的里边的center本身是没有写border属性的，但是它被外面的center污染到了。它们相同的部分，container里边的center会使用它自己的，而且外面的无法使用（即使外层的center没有该属性，也不会被里层的污染）。

 

伪类

如果要添加hover或者其它伪类，可以这样写：

&:hover {
    background: pink;
}

如果加上&标识符，代表绑定到父元素里，如果不带&标识符，则绑定到所有子元素里。拿上面的例子来说，看看实际写法：

#container {
    width: 500px;
    height: 500px;
    border: 1px solid blue;
    margin: 20px;

    .left, .center, .right {
        width: 100px;
        height: 100px;
    }

    .left {
        background: red;
    }

    .center {
        background: green;
    }

    .right {
        background: blue;
    }

    // 这样写是给container绑定了hover效果
    &:hover {
        background: pink;
    }

    // 这样写是给container的所有子元素绑定了hover效果
    :hover {
        background: pink;
    }
}

 

指令嵌套

什么是指令？

如：@media、@keyframe之类的css指令

嵌套方法（@media）：

HTML

<div class="container"></div>

less

.container {
    @media screen {
        width: 300px;
        height: 300px;
        background: black;

        @media (max-width: 300px) {
            width: 200px;
            height: 200px;
            background: yellow;
        }

        @media (min-width: 600px) {
            width: 500px;
            height: 500px;
            background: yellow;
        }
    }
}

这里所写的less，相当于下面的css:

.container {
    width: 300px;
    height: 300px;
    background: black;
}

@media screen and (max-width: 300px) {
    .container {
        width: 200px;
        height: 200px;
        background: yellow;
    }
}

@media screen and (min-width: 600px) {
    .container {
        width: 500px;
        height: 500px;
        background: yellow;
    }
}

如果嵌套里面有非指令的属性，会被忽略。