• home > webfront > style > postCss >

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

    Author:zhoulujun Date:

    button {&-ok {}}, button { &:after {}} 这一类用法是非常熟悉的。p, a, ul, li { & + & {border-top: 0;}} 这一类组合就可以吓死人咯。&符号还可以改变 css类的输出顺序。如 button{a&{}}

    看了《 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;
    [email protected]{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

    下一篇:Last page