waynecz / watson Goto Github PK

@import '~watson-scss';

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

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

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

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

  &--male {
    .human__leg {
    }
  }

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

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

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

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

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

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

@import '~watson-scss';

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

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

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

@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');
}

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

// 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);

@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);

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

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

@include placeholder {
  color: #eee;
}

@include ellipsis;

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

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

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

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

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