当使用@extend
指令扩展选择器时,Sass不会将扩展选择器中CSS内容放入扩展选择器中。 反之亦然。 它采用扩展选择器并将其附加到扩展选择器。
由于它的工作原理,因此无法在不同的范围内使用它。 例如,您不能扩展已在@media
块中声明的占位符,也不能扩展位于root内的占位符(如果您位于@media
指令中)。
当然,我们可以找到一种在可能时使用@extend
的方法,否则可以使用mixin。 确实,这是可行的,但有点棘手,我称其为混合技巧。 您可能需要三思而后行才能在项目中的任何地方实施。 也许只使用mixins会更容易。 我将由你担任法官。
包装@extend
这个想法实际上很容易掌握。 首先,我们定义mixin。 唯一的参数是$extend
,它定义了mixin是否应尝试扩展而不是包括扩展。 显然,它是一个布尔值(默认为true
)。
如果$extend
为true
,我们将扩展一个以mixin命名的占位符(不幸的是,这不是自动计算的)。 如果为false
,则像常规的mixin那样转储CSS代码。
在mixin中,我们定义了上述占位符。 为了避免在占位符中重复CSS代码,我们只需要通过将$extend
设置$extend
false
来包含mixin,以便将CSS代码转储到占位符的核心中。
/// *Mixtend* hack
/// @author Hugo Giraudel
@mixin mixtend-boilerplate($extend: true) {
@if $extend {
@extend %mixtend-boilerplate-placeholder;
} @else {
// Mixtend content
}
}
%mixtend-boilerplate-placeholder {
@include mixtend-boilerplate($extend: false);
}
例
作为一个简单的示例,我们将使用Nicolas Gallagher的micro-clearfix 。
@mixin clearfix($extend: true) {
@if $extend {
@extend %clearfix;
} @else {
&:after {
content: '';
display: table;
clear: both;
}
}
}
%clearfix {
@include clearfix($extend: false);
}
使用它非常简单:
.a { @include clearfix; }
.b { @include clearfix; }
@media (min-width: 48em) {
.c {
@include clearfix(false);
}
}
结果CSS:
.a:after, .b:after {
content: '';
display: table;
clear: both;
}
@media (min-width: 48em) {
.c:after {
content: '';
display: table;
clear: both;
}
}
崇高的文字片段
如果您想保存样板以使其高度可重用,您将很高兴地知道,为此创建Sublime Text代码片段非常容易。 在Sublime中,转到“ 工具”>“新建代码段…”,然后将其内容粘贴到下面。
随时更改<tabTrigger>
键以放置任何漂浮在船上的东西; 是在点击tab
以扩展代码段之前要输入的单词。 我和mixtend
一起去了。
<snippet>
<content><![CDATA[
@mixin ${1:mixtend}(\$extend: true) {
@if $extend {
@extend %${1:mixtend};
} @else {
${2}
}
}
%${1:mixtend} {
@include ${1:mixtend}(\$extend: false);
}
]]></content>
<tabTrigger>mixtend</tabTrigger>
<scope>source.scss</scope>
</snippet>
翻译自: https://css-tricks.com/snippets/sass/extend-wrapper-aka-mixtend/