Sass混合

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合实现大段样式的重用

@mixin rounded-corners {
  border-radius: 5px;
}

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

混合传参

混合并不一定总得生成相同的样式。可以通过在@include时给混合传参，来定制混合生成的精确样式。

并且，我们还可以指定参数默认值，当参数不传递的时候，可以使用默认值

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

.box1 {
  @include link-colors(red, green);
}
.box2 {
  @include link-colors(red);
}

效果展示

<div id="content">
  <article>
    <h1>标题</h1>
    <p>文字</p>
  </article>
  <aside>边</aside>
</div>

@mixin rounded-corners {
  border-radius: 5px;
  background-color: red;
}
@mixin link-colors($color, $hover: red) {
  color: $color;
  &:hover {
    color: $hover;
  }
}
#content {
  article {
    h1 {
      color: #333;
      @include rounded-corners;
    }
    p {
      margin-bottom: 1.4em;
      @include link-colors(blue);
    }
  }
  aside {
    background-color: #eee;
    @include link-colors(pink, orange);
  }
}

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。