SCSS

scss playopen in new window

关键点

  • vue scoped 不能使用全局 mixin ?

extend

  • 实现 DRY
// css 方式,需要新建类
.message-shared

// 避免创建多个类
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend .message-;
  @extend %message-shared;
}

mixin

属性名表达:#{$name}

@mixin color($name, $value) {
  #{$name}: $value;
}
h1 {
  // @extend .red;
  @include color(color, blue);
}

.red {
  color: red;
}

mixins | Element 源码分析open in new windowsass 揭秘之@mixin,%,@function_Preprocessor, Sass, SCSS, sass 揭秘 教程_w3cplusopen in new window

变量

Last Updated:
Contributors: cyio