头图

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

JerryWang_汪子熙

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

阅读 658

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
836 声望
1.6k 粉丝
0 条评论
836 声望
1.6k 粉丝
文章目录
宣传栏