scss 文件里的特殊符号 @ 和 @include 的用法

Jerry 之前的文章[.scss 文件里的特殊符号 - % 百分号和 $美元符号]()，介绍了 scss 文件里两个特殊符号，百分号 % 和美元符号 $ 的用法。

本文介绍另一个特殊符号 @ 的用法。

使用预处理器的优点之一是它们能够处理复杂、冗长的代码并对其进行简化。 这就是 mixins 派上用场的地方！

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

同占位符 % 一样，@mixin 定义的 border-radius 本身也不会出现在最终的 css 文件中。这是一种非侵入式的定义方式。

box class 使用 @include, 将 border-radius 的内容完全包含进来，有点像编程语言里的宏替换，并且还支持参数替换。

最终生成的 css 内容：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Spartacus 中的一个例子：

%cx-product-facet-navigation {
  min-width: 0;

  // hides the filter button in desktop experience
  @include media-breakpoint-up(lg) {
    button.dialog-trigger {
      display: none;
    }
  }
}

这里 media-breakpoint-up 是一个 mixin 的名称，lg 为传入的参数。

我们在 SAP Spartacus 的源代码里，无法查看到 media-breakpoint-up 的定义。

这些 media-breakpoint-up 来自 bootstrap，也是 SAP Spartacus 的依赖之一：