BEM & Sass:写更优雅的css

前言

项目自定义组件非常多，虽然要求组件使用BEM来命名，但是大家并没有很好的遵守，导致写的scss很不优雅。
所以借项目改版的机会，好好的梳理了一下组件的命名规范，及更好的使用scss，而不是停留在表面。

此篇文章大纲如下：

• 对比改版前后组件的css
• BEM基本介绍+使用
• Sass的进阶使用
• 优雅的结合BEM+Sass

新旧组件css对比

旧版

新版：

解释一下：b:表示block;e：表示element;m:表示modifier。

新版更加的清晰：element、modifier一目了然；更加的简洁、class精简。

BEM

BEM是由Yandex团队创造的Css class的命名方法，为了解决重复命名问题和前端命名更加规范化等。

A New Front-End Methodology: BEM

B:表示block
E:表示element;
M:表单modifier

通常如下格式：
block__element--modifier

与element通过__链接
与modifier 通过--链接

基本使用

.block{}
.block__element{}
.block--modifier{}

Sass

css的扩展语言，实现以“编程”语言写css。

基本的用法：如 嵌套写法、父级选择器:&、变量：$、插值语句 #{}等就不介绍了，可以去看官网文档。

介绍几个比较实用的语法：

@each

1. 多个赋值

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

2. map

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

混合指令

• @mixin：定义混合指令

@mixin b($block) {
. #{$block} {
    color:red;
  }
}

• @include ：引用混合指令

 @include b('block');

// 编译为：
 .block {
   color:red;
 }

• 向混合样式中导入内容

@mixin b($block) {
. #{$block} {
    @content;
  }
}

// 使用
@include b('block') {
 color:red;
}

// 编译为
.block {
  color:red;
}

完整的文档：请查看https://www.sass.hk/docs/

BEM+Sass

BEM结合Sass：可以更加简洁、高效、清晰的写Css

• minxin.scss

$namespace:'zz'；
$element-separator:'__';
$modifier-separator :'--';
$state-prefix:'is-'
@mixin b($block) {
  $B: $namespace+'-'+$block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }
  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}


@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

• 使用上面的mixin.scss

@import './minxin.scss'

@include b('tab') {
 border:1px solid red;
 @include e('header') {
...
}
@include m('top'){
...
}
}