post-css/less/sass 样式嵌套与命令之"&"符号—BEM

看了《 less 的 & 详解 https://www.jianshu.com/p/127b0974cfc3》，对于此文再做一别补充

常见用法：直接嵌套写法

.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