首页 > 代码库 > Sass--混合指令
Sass--混合指令
混合指令和前面的 %SelecterName有点相似，都是不引用就不会被编译的。
参照：Sass--@Rules指令
混合指令引用需要@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
Sass--混合指令
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。