scss 完美的BEM示例。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 完美的BEM示例。相关的知识，希望对你有一定的参考价值。

<!--from this article: https://m.alphasights.com/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b#.sh74id238 -->

<body class="scenery">
  <section class="scenery__sky">
    <div class="sky [sky--dusk / sky--daytime] [sky--foggy]">
      <div class="sky__clouds"></div>
      <div class="sky__sun"></div>
    </div>
  </section>
  <section class="scenery__ground"></section>
  <section class="scenery__people"></section>
</body>
//  example companion pseudo-css
// Block
.scenery {
   //Elements
  &__sky {
    fill: screen;
  }
  &__ground {
    float: bottom; 
  }
  &__people {
    float: center;
  }
}

//Block
.sky {
  background: dusk;
  
  // Elements
  
  &__clouds {
    type: distant;
  }
  
  &__sun {
    strength: .025;
  }
  
  // Modifiers
  &--dusk {
    background: dusk;
    .sky__clouds {
      type: distant;
    }
    .sky__sun {
      strength: .025;
    }
  }
  
  &--daytime {
    background: daylight;
    .sky__clouds {
      type: fluffy;
      float: center;
    }
    .sky__sun {
      strength: .7;
      align: center;
      float: top;
    }
  }
}

以上是关于scss 完美的BEM示例。的主要内容，如果未能解决你的问题，请参考以下文章

scss BEM-SASS

scss 通过mixin生成BEM类名

带有父选择器的 BEM 嵌套 SCSS 会破坏 Sublime Text 语法突出显示？

scss 用于BEM风格选择器的Mixins。

css Polylang的自定义语言切换器。包含PHP函数和SCSS样式。 HTML标记使用BEM方法。 SCSS文件是你

BEM：允许修改哪些修饰符？