常见用法：
直接嵌套写法
.a{ color:red; .b{ color:blue; } }
这一类是最常见的
这个一类是我们日常所常见的
&的高级用法
作为内层选择器表示对父选择器的引用
.button {
&-ok {
background-image: url("ok.png";
}
&-cancel {
background-image: url("cancel.png";
}
&-custom {
background-image: url("custom.png";
}
}
输出代码
.button-ok { background-image: url("ok.png"; } .button-cancel { background-image: url("cancel.png"; } .button-custom { background-image: url("custom.png"; }
改变输出顺序-反转嵌套的顺序
.demo-title {
.demo & {
font-size: 20px;
}}
输出
.demo .demo-title { font-size: 20px; }
借代父选择器
a { color:#000;
&:hover {
text-decoration:none;
}
&:focus {
color:#999;
}
}
这个数据就不用多说了吧
.link { & + & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } }
输出
.link + .link { color: red; } .link .link { color: green; } .link.link { color: blue; } .link, .linkish { color: cyan; }
需要注意的是所有的父选择器，而不是仅仅重复最近的祖先选择器。请看以下例子：
.grand { .parent { & > & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } } }
输出
grand .parent > .grand .parent { color: red; } .grand .parent .grand .parent { color: green; } .grand .parent.grand .parent { color: blue; } .grand .parent, .grand .parentish { color: cyan; }
.meng, .long {
div & {
color: black;
}
& + & {
color: red;
}
& ~ & {
color: red;
}
}
编译后代码
div .meng, div .long { color: black; } .meng + .meng, .meng + .long, .long + .meng, .long + .long { color: red; } .meng ~ .meng, .meng ~ .long, .long ~ .meng, .long ~ .long { color: red; }
将 & 用在一个使用逗号分隔的选择器列表中，可以产生列表中所有选择器的所有可能的排列，这被称作组合爆炸。如：
p, a, ul, li { border-top: 2px dotted #366; & + & { border-top: 0; } }
述列表中有 4 个选择器，列表中所有选择器的所有可能的排列，将有 16 种可能。编译后的CSS代码为：
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; }
BEM 的命名规范如下：
/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */ .block { } /* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */ .block__element { } /* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */ .block--modifier { }
通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免，毕竟只是一个命名约束，不按规范写照样能运行。
@bk-prefix: andy;
.@{bk-prefix}-divider { //.andy--divider
&--info{ // .andy--divider--info{
&-left{ // .andy--divider--info-left{
}
}
&_vertical{ // .andy--divider_vertical{
}
&_horizontal{ // .andy--divider_horizontal{
}
.andy-divider-horizontal {
&-left { // .andy--divider_horizontal .andy--divider--info-left{
left: 2em;
}
&-right { // .andy--divider_horizontal .andy--divider--info-right{
right: 2em;
}
}
.andy-divider-vertical & { // .andy--divider_vertical .andy--divider--infol{
padding: 20px 0;
}
}
LESS详解之嵌套(& https://blog.csdn.net/lee_magnum/article/details/12950407
转载本站文章《post-css/less/sass样式嵌套与命令之"&"符号—BEM》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/postCss/2019_1220_8684.html