SCSS

scss play

关键点

• 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 源码分析sass 揭秘之@mixin，%，@function_Preprocessor, Sass, SCSS, sass 揭秘 教程_w3cplus

变量

• calc 中使用

  height: calc(100vh - #{$--header-h});

  css3 - Sass Variable in CSS calc() function - Stack Overflow