标签：http div blank amp ext 报错 html ref 样式
混合指令和前面的 %SelecterName有点相似，都是不引用就不会被编译的。
混合指令引用需要@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
标签：http div blank amp ext 报错 html ref 样式
原文地址：http://www.cnblogs.com/jiaoxuanwen/p/7206662.html
