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