关于scss:scss-文件里的特殊符号-和-include-的用法

38次阅读

共计 856 个字符，预计需要花费 3 分钟才能阅读完成。

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 的依赖之一：

正文完