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

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 文件中。这是一种非侵入式的定义方式。
【scss|scss 文件里的特殊符号 @ 和 @include 的用法】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 的依赖之一：