Sass 中的@规则

Sass 中@ 规则包括：

@use：用于从其他 Sass 样式表加载混入 (mixins)、函数 (functions) 和变量 (variables)，并将多个样式表的 CSS 合并在一起。

@forward：加载一个 Sass 样式表，并使其混入 (mixins)、函数 (functions) 和变量 (variables) 在使用 
@use 规则加载你的样式表时可用。做类库时使用，一般项目开发中很少使用。

@import 扩展了 CSS 的 @import 规则，用于从其他样式表加载样式、混入 (mixins)、函数 (functions) 和变量 (variables)。不建议试用，未来会弃用。

@mixin 和 @include 使重用一块样式变得简单。

@function 定义可以在 SassScript 表达式中使用的自定义函数。

@extend 允许选择器从另一个选择器继承样式。

@at-root 将其内部的样式放在 CSS 文档的根部。不做嵌套，而是放到根上，用处不大。

@error 导致编译失败并显示错误消息。

@warn 打印一个警告消息，但不会完全停止编译。

@debug 打印调试信息。

平时用到比较的@use 和@extend，@use 是 Sass 模块化的基础，@Extend 提供了继承的能力，Sass 也对 Extend 做了很多优化，并不是简单的做合并操作。他会对选择器通过一些算法进行处理，最终进行合并并生成 CSS。

今天主要看看@extend是怎么处理对选择器进行合并处理的，首先我们看一个简单的例子，3 个button，report 和 submit 有一些格外的属性，如果用原生 CSS 的话，通常会在 report button 加上两个类 button-basic 和 button report。Sass 的 extends 让子元素包含了父类的所有属性，可以看生成的 CSS。

.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;
}

生成后的CSS，可以看到，button-report包含了 button-basic和 button-report 两个类的所有属性，这样只用写一个类就可以，相比之前的写法简化了。

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

.button-report {
  background-color: red;
}

.button-submit {
  background-color: green;
  color: white;
}/*# sourceMappingURL=test.css.map */

我们再看一下官网的一个例子，

.content nav.sidebar {
    @extend .info;
  }
  
  // 这段代码不会被继承，因为 `p` 与 `nav` 不兼容。
  p.info {
    background-color: #dee9fc;
  }
  
  // 无法知道 `<div class="guide">` 是在 `<div class="content">` 内部还是外部，
  // 因此 Sass 为了安全起见会生成两者。
  .guide .info {
    border: 1px solid rgba(#000, 0.8);
    border-radius: 2px;
  }
  
  // Sass 知道所有匹配 "main.content" 的元素也会匹配 ".content"，
  // 因此避免生成不必要的交错选择器。
  main.content .info {
    font-size: 0.8em;
  }
  

生成后的 CSS

1. p 和 content 没有做组合，因为不具有相关性，这里相关性指的是，能匹配到相对应的元素，就是 p.info nav.sidebar 可以匹配到彼此，如果这里换成 nav.info 就可以了，第三种情况是可以的。
2. guide 和 content 做了组合，因为无法确认父子关系
3. main.content 和 .content是有关系的，所以 main.content 替代了 .content

p.info {
  background-color: #dee9fc;
}

.guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar {
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 2px;
}

main.content .info, main.content nav.sidebar {
  font-size: 0.8em;
}/*# sourceMappingURL=extend1.css.map */

Sass 在开发中，代码量能减少很多，而且实现模块等高级特性，从而使得整个网站的 CSS变得更加的可控和有序。