Sass で @import を使用して条件付き CSS 読み込みを実装するにはどうすればよいですか?

Sass で @import を使用した条件付き CSS ロード

Sass では、次のような特定の条件に基づいて CSS を選択的にロードする必要が生じる場合があります。現在のページとして。これを実現するには、@if ステートメント内で @import ディレクティブを使用することを検討できます。ただし、このアプローチは Sass では実現できません。

Sass では、コントロール ディレクティブまたはミックスイン内で @import ディレクティブを使用することができません。この制限を回避するには、ミックスインを使用した別のアプローチを採用できます。 @if ステートメントの外側でファイルをインポートし、その中で適切なミックスインを呼び出すことで、CSS の読み込みを動的に制御できます。

実装:

次のファイル構造を考慮してください:

minifiedcssforloginpage.scss
grouped-pages.scss
_partial.scss

minifiedcssforloginpage.scss で、$load-complete-css を false に設定します。次に、すべてのモジュール、レイアウト、およびコアのインポートを含む myproject.scss をインポートします。

myproject.scss で、次のように各モジュールのミックスインを作成します。

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

styles.scss 、_partial.scss をインポートし、$load-complete-css に基づいて条件付きでミックスインを含めます。

@import "_partial";

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

このアプローチに従うことで、コード編成にミックスインを使用する利便性を維持しながら、さまざまなページの CSS を選択的に読み込むことができます。そして再利用性。

以上がSass で @import を使用して条件付き CSS 読み込みを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。