混合指令和前面的 %SelecterName有點相似，都是不引用就不會被編譯的。

參照：[email protected]

[email protected]，[email protected]

@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;
 

編譯後和上面的結果是一樣的。

[email protected]

%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;

[email protected]

從上面的幾次嘗試可以看出來：

@include可以用來繼承樣式，也可以直接用來具現化樣式。

@extend只能繼承樣式。

~END

Sass--混合指令