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

總結

以上是生活随笔為你收集整理的scss 文件里的特殊符号 @ 和 @include 的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。