@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中文文档