Sass(Scss) 学习笔记（三）--- 混合器和继承

一、混合器

1、概念

​ 在sass我们可以通过变量来复用小规模的样式（颜色、字体等），但如果我们想要复用一整段的样式代码，那变量就没办法了。还好sass定义了一个新特性 — 混合器 ，来专门实现多行代码的复用。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起实现某个特定的页面样式。

​ 混合器的样式也不一定是一成不变的，可以通过参数的形式没生成特定的样式。

​ 但混合器也不能滥用，滥用混合器，可能会导致代码很少，但生成的样式表过大，导致页面加载缓慢。

2、定义 @mixin

​ 在 sass 中使用 @mixin 标识符来定义混合器，相当于给一段代码赋予了一个名字，然后就可以在其他地方通过引用来复用这段代码。

​ @mixin 可以被缩写为 =

/* 定义了一个叫rounded-corners 的混合器 */
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* 缩写 */
=rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

​ 混合器中不仅可以包含属性，也可以包含css规则，比如选择器、& 标识符等，在引用时，就会形成sass嵌套的效果：

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

3、引用 @include

​ 当我们定义好混合器之后，我们就可以通过 @include 标识符来引用混合器。在哪个地方进行引用，混合器的代码就会插入到哪个地方。

​ @include 可以缩写为 +

/* 进行引用 */
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
/* 缩写 */
notice {
  background-color: green;
  border: 2px solid #00aa00;
  +rounded-corners;
}

/* 编译后的css */
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

4、混合器传参

​ sass在定义混合器时，可以提前定义好形参，然后在引用时，传递参数，生成特定样式，跟JS的函数时分类似，实参会按照顺序一一传递给形参。

/* 定义混合器 */
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
/* 引用混合器 */
a {
    // 按照顺序传递给形参
  @include link-colors(blue, red, green);
}


/* 最终生成的css */
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

​ sass还可以通过$name: value 的形式给指定参数传值，而不必考虑顺序问题：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

​ 我们还可以给混合器的参数设置一个默认值：

@mixin link-colors(
    $normal: red,
    $hover: blue,
    $visited: green
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

​ 如果传入的参数数量不确定，我们在定义形参时可以通过 ... 的形式：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

// 编译后
shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

​ 在传参时，也可以通过 ... 来展开变量：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

// 编译后
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

二、继承

1、概念

​ 在sass中为了进一步减少代码的重复书写，还提出了继承的概念，继承是基于选择器的，也就是说一个选择器可以继承为另一个选择器定义的所有样式。默认浏览器样式是不会被继承的，因为它们不属于样式表中的样式。

​ 继承的原理并不是通过样式属性的复制来实现的，而是通过选择器的复制实现的，所以跟混合器相比，继承生成的css代码相对更少。

​ 但是继承要慎用，因为继承的子选择器不仅会继承父选择器自身的所有样式，而且任何跟父选择器有关的组合选择器也都会被子选择器继承，也就是说所有父选择器出现的地方，子选择器会复制一份，然后替换成子选择器。最好不要在后代选择器中继承，这会导致选择器的个数依然可能会变得相当大。

2、使用

​ sass中通过@extend 标识符来实现继承：

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

​ 此时以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"，也就是将两个选择器的样式结合了起来。

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

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