Sass import extend mixin

@import 除了导入文件外，还可以嵌套selector&rule（嵌入的时候会形成后代选择器及规则）

.example {
  color: red;
}
#main {
  @import "example";
}
编译结果：
#main .example {
  color: red;
}

@extend 只会继承规则不会带选择器

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
编译结果：
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}
.seriousError {
  border-width: 3px; 
}
//等同于如下：
.error {
  border: 1px #f00;
  background-color: #fdd; 
}
.seriousError {
  border: 1px #f00;
  background-color: #fdd; 
  border-width: 3px; 
}

@mixin对应@include，没有选择器只能被调用，可接受参数和@content引用调用处的内容

@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}
.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}
编译结果：
.button {
  border: 1px solid black;
}
.button:not([disabled]):hover {
  border-width: 2px;
}