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