Jerry 之前的文章.scss 文件里的特殊符號(hào) - % 百分號(hào)和 $美元符號(hào)，介紹了 scss 文件里兩個(gè)特殊符號(hào)，百分號(hào) % 和美元符號(hào) $ 的用法。

本文介紹另一個(gè)特殊符號(hào) @ 的用法。

使用預(yù)處理器的優(yōu)點(diǎn)之一是它們能夠處理復(fù)雜、冗長的代碼并對其進(jìn)行簡化。 這就是 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 本身也不會(huì)出現(xiàn)在最終的 css 文件中。這是一種非侵入式的定義方式。

box class 使用 @include, 將 border-radius 的內(nèi)容完全包含進(jìn)來，有點(diǎn)像編程語言里的宏替換，并且還支持參數(shù)替換。

最終生成的 css 內(nèi)容：

.box {-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px; }

Spartacus 中的一個(gè)例子：

%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 是一個(gè) mixin 的名稱，lg 為傳入的參數(shù)。

我們在 SAP Spartacus 的源代碼里，無法查看到 media-breakpoint-up 的定義。

這些 media-breakpoint-up 來自 bootstrap，也是 SAP Spartacus 的依賴之一：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。