SCSS @extend与@mixin – 昨日当年

@extend

@extend可以让一个样式包含另一个样式，就是可以让选择器继承另一个选择器下的所有样式。让原本需要设置多个class的标签只需要设置一个class

简单演示：

.class1 {
    color: red;
}
.class2 {
    @extend .class1;
    font-size: 16px;
}

编译出来的结果为：

.class1, .class2 {
  color: red; }
.class2 {
  font-size: 16px; }

这样一来，比如原来需要这样写的html

<div class="class1 class2"></div>

就可以这样写了

<div class="class2"></div>

其它选择器

所有的选择器都可以使用extend进行继承

比如:hover:

a {
    color: #000;
    &:hover {
        text-decoration: underline;
    }
}
.link {
    @extend a:hover;
    font-weight: bold;
}

编译结果为：

a {
  color: #000; }
  a:hover, .link {
    text-decoration: underline; }
.link {
  font-weight: bold; }

多重继承

一个选择器可以继承多个其它选择器的所有样式，如：

.class3 {
    @extend .class1;
    @extend .class2;
    font-weight: bold;
}

编译结果为：

.class1, .class2, .class3 {
  color: red; }
.class2, .class3 {
  font-size: 16px; }
.class3 {
  font-weight: bold; }

延续继承

当一个选择器继承一个选择器时，那个选择器所继承的选择器也会一同继承，如

.class1 {
    color: red;
}
.class2 {
    @extend .class1;
    font-size: 16px;
}
.class3 {
    @extend .class2;
    font-weight: bold;
}

结果依然是：

.class1, .class2, .class3 {
  color: red; }
.class2, .class3 {
  font-size: 16px; }
.class3 {
  font-weight: bold; }

@mixin

@mixin为混合定义指定，使用时需要先定义样式，如：

@mixin media-query($device) {
  @media screen and (max-width: $device) {
    @content;
  }
}

使用时需要使用@include引用：

.class4 {
    @include media-query(800px) {
        width: 85%;
    }
}

上面的例子中使用了参数和@content，@mixin允许使用参数，还可以设置多个参数即缺省值，如：

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
    @include sexy-border(blue, 1in);
}

// 为参数指定缺省值
@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}

@content用于添加混合样式，在@include中出现的其它样式将会出现在@content的位置。

更多内容可以浏览Sass教程 Sass中文文档