Less 嵌套规则

在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

Less 内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面,如果没有 & 符号,则它被解析为父选择器的后代。如果有 & 符号,它就被解析为父元素自身或父元素的伪类。同时用在选择器中的 & 还可以反转嵌套的顺序并且可以应用到多个类名上。

用于伪类/伪元素

用于当前选择器的伪类或者伪元素,如 :hover、:focus、:after、:before 等

.demo {
   color: #333;
   background: #F0F0F0;
   &:after {
       content: '.';
       display: block;
       background-color: aquamarine;
   }
}

编译 less,输出的 CSS 如下:

.demo {
 color: #333;
 background: #F0F0F0;
}
.demo:after {
 content: '.';
 display: block;
 background-color: aquamarine;
}

对父选择器的引用

作为内层选择器表示对父选择器的引用,这里要注意在写 less 的嵌套的时候会有差异:

.demo2 {
   color: #333;
   background: #F0F0F0;
   &-title {
       text-align: center;
   }
}

编译 less,输出的 CSS 如下:

.demo2 {
 color: #333;
 background: #F0F0F0;
}
.demo2-title {
 text-align: center;
}

注意:上面的 & 引用了 .demo,这里虽然是嵌套的写法但仅代表选择器的引用而不是 css 的嵌套关系,和下面的代码有 css 层级的不同。例如:

.demo2 {
   .demo2-title {
       text-align: center;
   }
}

编译 less,输出的 CSS 如下:

.demo2 .demo2-title {
 text-align: center;
}

注意:在一个选择器中,& 可以重复出现多次,这样就可以多次引用父选择器而不必重复它的名字。例如:

  • &&  表示.demo.demo

  • & &  表示.demo .demo

  • &, &  表示.demo, .demo

更改选择器顺序

将选择器添加到继承的(父)选择器之前可能很有用。这可以通过将 & 放在当前选择器之后来完成。例如,在使用 Modernizr 时,你可能希望根据支持的功能指定不同的规则:

.header {
 .menu {
   border-radius: 5px;
   .no-borderradius & {
     background-image: url('images/button-background.png');
   }
 }
}

选择器 .no-borderradius & 会将 .no-borderradius 添加到其父 .header .menu 的前面,以在输出中形成 .no-borderradius .header .menu:

.header .menu {
 border-radius: 5px;
}
.no-borderradius .header .menu {
 background-image: url('images/button-background.png');
}

组合爆炸

& 也可用于在逗号分隔列表中生成选择器的所有可能排列组合:

p, a, ul, li {
 border-top: 2px dotted #366;
 & + & {
   border-top: 0;
 }
}

这将扩展到指定元素的所有可能 (16) 组合:

p, a, ul, li {
 border-top: 2px dotted #366;
}
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;
}
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号