scss 檔案裡的特殊符號 @ 和 @include 的用法

注销發表於2022-01-09
CSS符號

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

相關文章