Sass - 继承指令(@extend)、混入指令(@mixin)，以及导入文件@import

1 继承指令：

指令允许您将一组 CSS 属性从一个选择器共享到另一个选择器。如果您有几乎相同样式的元素，但仅在一些小细节上有所不同，则 @extend 指令很有用。简化开发代码量,同时会减少编译后的代码量，减少代码体积。值得推荐

语法

%button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend %button-basic;
  background-color: red;
}

.button-submit  {
  @extend %button-basic;
  background-color: green;
  color: white;
}

// 注意上述代码中的%开头的样式类是不会被编译到代码中的。

2 混合指令

@mixin 指令可让您创建可在整个网站中重复使用的 CSS 代码。

创建 @include 指令是为了让您使用（引用）mixin。简化开发代码量，但是并不会减少编译后的代码量。

关于 Sass 中连字符和下划线的提示：连字符和下划线被认为是相同的。

/* 定义带两个参数的 mixin，可添加默认值 */
@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用带两个值的 mixin
}

.myNotes {
  @include bordered(red, 2px); // 调用带两个值的 mixin
}

3、文件导入指令

就像 CSS 一样，Sass 也支持 @import 指令。

@import 指令允许您将一个文件的内容包含在另一个文件中。相当于css、sass模块化

由于性能问题，CSS @import 指令有一个主要的缺点；每次调用它时都会创建一个额外的 HTTP 请求。但是，Sass @import 指令将文件包含在 CSS 中；所以在运行时不需要额外的 HTTP 调用！

主要是因为sass是在编译时分为多个模块，编译只会合成一个模块文件。而css是在运行时是多个模块，需要多次请求。

Sass 导入语法：

@import url('filename.css');// 运行时
@import 'filename.sass';/* 编译时，会把file文件编译成一个文件；会出现样式污染和私有化问题。这里建议使@use指令 */ 


@use '/filename.sass'  // 带有命名空间，使用时filename.属性
//或者
@use '/filename.sass' as othername //使用时othername.属性,注意这里尽量不要将othername写成*