css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。

然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用。

1.将要引入的scss文件

2.通过link引入到HTML文件

3.例如：

4.看浏览器效果

4. 静默注释;(sass中推荐使用"//",这样的话他对应的css文件不会出现注视)

（注：因为你并不希望其他人在浏览网页代码时查看你的注释）

1 body {
2   color: #333; // 这种注释内容不会出现在生成的css文件中
3   padding: 0; /* 这种注释内容会出现在生成的css文件中 */
4 }

（1）

（2）

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。

当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将

其生成到对应css文件中的相应位置，于是这些注释被抹掉。

5. 混合器;

（1）你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。例如：

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。

@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

（1）

（2）

（3）

实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

5-1. 何时使用混合器;

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

混合器和类配合使用写出整洁的html和css，因为使用语义化的类名亦可以帮你避免重复使用混合器。为了保持你的html和css的易读性和可维护性，在写样式的过程中一定要铭记二者的区别

5-2. 混合器中的CSS规则;

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

1 @mixin no-bullets {
2   list-style: none;
3   li {
4     list-style-image: none;
5     list-style-type: none;
6     margin-left: 0px;
7   }
8 }

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的sass代码，这个例子中使用了no-bullets这个混合器：

1 ul.plain {
2   color: #444;
3   @include no-bullets;
4 }

sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:

1 ul.plain {
2   color: #444;
3   list-style: none;
4 }
5 ul.plain li {
6   list-style-image: none;
7   list-style-type: none;
8   margin-left: 0px;
9 }

混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样，sass解开嵌套规则时，用父规则中的选择器替代&。

5-3. 给混合器传参;

通过在@include混合器时给混合器传参，来定制混合器生成的精确样式：

1 @mixin link-colors($normal, $hover, $visited) {
2     color: $normal;
3   &:hover { color: $hover; }
4   &:visited { color: $visited; }
5 }

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

1 a {
2   @include link-colors(blue, red, green);
3 }
4 
5 //Sass最终生成的是：
6 
7 a { color: blue; }
8 a:hover { color: red; }
9 a:visited { color: green; }

为了解决难以区分参数的问题，sass允许通过语法$name: value的形式指定每个参数的值。

1 a {
2     @include link-colors(
3       $normal: blue,
4       $visited: green,
5       $hover: red
6   );
7 }

5-4. 默认参数值;

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，如下代码：

 1 @mixin link-colors(
 2     $normal,
 3     $hover: $normal,
 4     $visited: $normal
 5   )
 6 {
 7   color: $normal;
 8   &:hover { color: $hover; }
 9   &:visited { color: $visited; }
10 }

如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。

6. 使用选择器继承来精简CSS;

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:

1 //通过选择器继承继承样式
2 .error {
3   border: 1px solid red;
4   background-color: #fdd;
5 }
6 .seriousError {
7   @extend .error;
8   border-width: 3px;
9 }

相关元素不仅会拥有一个3px宽的边框，而且这个边框将变成红色的，这个元素同时还会有一个浅红色的背景，因为这些都是在.error里边定义的样式。

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

 .seriousError {
   @extend .error;
  border-width: 3px;
    }

如上所示，在class="seriousError"的html元素内的超链接也会变成红色和粗体。
 
6-1. 何时使用继承;
因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。
 
6-2. 继承的高级用法;
任何css规则都可以继承其他规则，几乎任何css规则也都可以被继承。
接下来的这段代码定义了一个名为disabled的类，样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现：

1 .disabled {
2   color: gray;
3   @extend a;
4 }

假如一条样式规则继承了一个复杂的选择器，那么它只会继承这个复杂选择器命中的元素所应用的样式。举例来说， 如果.seriousError@extend.important.error ， 那么.important.error 和h1.important.error 的样式都会被.seriousError继承， 但是.important或者.error下的样式则不会被继承。这种情况下你很可能希望.seriousError能够分别继承.important或者.error下的样式。
如果一个选择器序列（#main .seriousError）@extend另一个选择器（.error），那么只有完全匹配#main .seriousError这个选择器的元素才会继承.error的样式，就像单个类 名继承那样。拥有class="seriousError"的#main元素之外的元素不会受到影响。
像#main .error这种选择器序列是不能被继承的。这是因为从#main .error中继承的样式一般情况下会跟直接从.error中继承的样式基本一致，细微的区别往往使人迷惑。
现在你已经了解了通过继承能够做些什么事情，接下来我们将学习继承的工作细节，在生成对应css的时候，sass具体干了些什么事情。
 
6-3. 继承的工作细节;
跟变量和混合器不同，继承不是仅仅用css样式替换@extend处的代码那么简单。为了不让你对生成的css感觉奇怪，对这背后的工作原理有一定了解是非常重要的。
@extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。当.error出现在复杂的选择器中，比如说h1.error.error a或者#main .sidebar input.error[type="text"]，那情况就变得复杂多了，但是不用担心，sass已经为你考虑到了这些。
关于@extend有两个要点你应该知道。
跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。
 
6-4. 使用继承的最佳实践;
通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。但是如果你不小心，可能会让生成的css中包含大量的选择器复制。
避免这种情况出现的最好方法就是不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。如果你这么做，同时被继承的css规则有通过后代选择器修饰的样式，生成css中的选择器的数量很快就会失控：

1 .foo .bar { @extend .baz; }
2 .bip .baz { a: b; }

在上边的例子中，sass必须保证应用到.baz的样式同时也要应用到.foo .bar（位于class="foo"的元素内的class="bar"的元素）。例子中有一条应用到.bip .baz（位于class="bip"的元素内的class="baz"的元素）的css规则。当这条规则应用到.foo .bar时，可能存在三种情况，如下代码:

 1 <!-- 继承可能迅速变复杂 -->
 2 <!-- Case 1 -->
 3 <div class="foo">
 4   <div class="bip">
 5     <div class="bar">...</div>
 6   </div>
 7 </div>
 8 <!-- Case 2 -->
 9 <div class="bip">
10   <div class="foo">
11     <div class="bar">...</div>
12   </div>
13 </div>
14 <!-- Case 3 -->
15 <div class="foo bip">
16   <div class="bar">...</div>
17 </div>

 
为了应付这些情况，sass必须生成三种选择器组合（仅仅是.bip .foo .bar不能覆盖所有情况）。如果任何一条规则里边的后代选择器再长一点，sass需要考虑的情况就会更多。实际上sass并不总是会生成所有可能的选择器组合，即使是这样，选择器的个数依然可能会变得相当大，所以如果允许，尽可能避免这种用法。
值得一提的是，只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。