@extend包装器又名Mixtend

当使用@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/