Sass: 简单点, 写 BEM 的方式简单点

Intro

• Mainly to simplify the way writing Nested BEM
• Tools which are most of use

Supporting facilities

1. react-bem-classname for generating BEM classNames easily.
2. watson-snippet vscode extension for coding faster.

Installation

npm i watson-scss -D

@import '~watson-scss';

What Watson got

Watson is devote itself to help write BEM fastly and furiously

Nested B__E--M

@include block(human) {
  @include element(finger) {
    @include modifier(little) {
    }
  }

  @include modifier(male) {
    @include element(leg) {
    }
  }

  @include when(hurt) {
    @include element(hand) {
    }
  }
}

It's defaultly equal to:

.human {
  &__finger {
    &--little {
    }
  }

  &--male {
    .human__leg {
    }
  }

  &.is-hurt {
    .human__head {
    }
  }
}

AHA, here you may think the number of words you write however was increased ! Indeed but hang on my dude, that's why I introduce Webstorm for you, take a look of this

Watson support more complicated nest rule like:

@include element(arm) {
  @include pseudo(focus) {
    @include custom-selector('+') {
      @include modifier(left) {
      }
    }

    @include custom-selector('~', hand, right) {
    }
  }
}

which'll convert to

.human {
  &__arm {
    &:focus {
      & + .hum__arm--left {
      }

      & ~ .human__hand--right {
      }
    }
  }
}

with-attr

@include with-attr(disabled) {
}
// equals to
&[disabled] {
}

See other tools below 😋

Configuration

@import '~watson-scss';

/* cover default config after import watson */
$block-modifier: '_' !global;
$sm: 720px !global;

/* enable namespace */
$namespace: 'ele' !global;
...

Look up more configuration here

List of tools

▸ media query

@include meadia-query(sm) {
}
// equals to
@media only screen and (min-width: 768px) {
}

See more breakpoints

▸ font-face

@include font-face(name, '//path/name', bold, italic);
// equals to
@font-face {
  font-family: name;
  font-style: italic;
  font-weight: bold;
  src: local($name), url('//path/name.woff2') format('woff2'), url('//path/name.woff') format('woff'), url('//path/name.ttf') format('truetype');
}

if you want to specify format, insert format-list as 3rd argument

@include font-face(name, '//path/name', ttf otf, bold, italic);

▸ shapes

// circle of 30px diameter
@include circle(20px, #111);

@include square(10px);

// directions can be on of 'up' 'up-right' 'right' 'down-right'
// 'down' 'down-left' 'left' 'up-left'
@include triangle(up, 20px, 10px, #111);

▸ transform

@include perfect-transition;
// convert to
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

transition: ts(0.2s, 1s);
// convert to
transition: 0.2s 1s cubic-bezier(0.4, 0, 0.2, 1);

transform: tx(3px) ty(3px) txy(2px, 3px);
// convert to
transform: translateX(3px) translateY(3px) translate(2px, 3px);

▸ basic CN fonts

// 黑体 sans
@include font-hei;
// 楷体 serif
@include font-kai;
// 宋体
@include font-song;
// 仿宋
@include font-fang-song;

details here

▸ webkit

// thumb-color track-background width
@include scroll-bar(#333, #fff, 3px);

@include placeholder {
  color: #eee;
}

▸ ellipsis

@include ellipsis;

▸ share-rule

@include share-rule(rule) {
  width: 1px;
}

.a {
  @include extend-rule(rule);
}

.b {
  @include extend-rule(rule);
}

// equals to
.a,
.b {
  width: 1px;
}

▸ others

color: transparent(#000, 60);
// convert to
color: rgba(0, 0, 0, 0.6);

Feel free to add your marvelous tools to Watson