如何在 Sass 中使用 @import 實作條件 CSS 載入？

Sass 中使用@import 進行條件CSS 加載

在Sass 中，你可能會遇到根據特定條件選擇性加載CSS 的需求，例如作為當前頁面。為了實現這一點，您可以考慮在 @if 語句中使用 @import 指令。然而，這種方法在 Sass 中不可行。

Sass 不允許在控制指令或 mixin 中使用 @import 指令。為了規避此限制，您可以使用 mixins 採用不同的方法。透過在 @if 語句外部匯入檔案並在其中呼叫適當的 mixin，您可以動態控制 CSS 載入。

實作：

考慮以下檔案結構：

minifiedcssforloginpage.scss
grouped-pages.scss
_partial.scss

在minifiedcssforloginpage.scss 中，將$load-complete-css 設定為falssse 。然後，匯入包含所有模組、佈局和核心導入的 myproject.scss。

在myproject.scss 中，為每個模組建立mixin，如下所示：

@mixin module1 {
    // module1 styles
}
@mixin module2 {
    // module2 styles
}
@mixin module3 {
    // module3 styles
}

在styles.scss 中，導入_partial.scss 並有條件地包含基於$ load-complete-css 的mixins。

@import "_partial";

@if $load-complete-css {
    @include module1;
    @include module2;
    @include module3;
}

遵循此方法，您可以選擇性地為不同頁面載入 CSS，同時保持使用 mixins 進行程式碼組織的便利性和可重複使用性。

以上是如何在 Sass 中使用 @import 實作條件 CSS 載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！