Sass--混合指令

混合指令和前面的 %SelecterName有点相似，都是不引用就不会被编译的。

参照：[email protected]指令

混合指令引用需要@include，后者需要@extend

@mixin biggerText{
    font: {
        size: 30px;
        weight: bolder;
    }

    &:after{
        content: " More";
    }
}

div{
    @include biggerText;
}

编译后

div {
  font-size: 30px;
  font-weight: bolder; }
  div:after {
    content: " More"; }

在外部直接引用混合指令

@mixin biggerText{
    div{
        font: {
            size: 30px;
            weight: bolder;
        }

        &:after{
            content: " More";
        }
    }
}

@include biggerText;

编译后和上面的结果是一样的。

把上面的代码用@extend来写一下

%extendName{
    div{
        font: {
            size: 30px;
            weight: bolder;
        }

        &:after{
            content: " More";
        }
    }
}

body{
    @extend %extendName;
}

编译后结果一样。

但如果试着在最外层直接引用

%extendName{
    div{
        font: {
            size: 30px;
            weight: bolder;
        }

        &:after{
            content: " More";
        }
    }
}

@extend %extendName;

则会报错。@extend不能这样用。

从上面的几次尝试可以看出来：

@include可以用来继承样式，也可以直接用来具现化样式。

@extend只能继承样式。

~END