关于scss: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 的依赖之一：