Sass 条件文で @import 文を使用するには?

Sass の @if ステートメントでの @import の使用

Sass の使用中、状況に応じて CSS を選択的にロードしたい状況に遭遇することがあります。文脈上。独自の最適化された CSS を必要とするログイン ページがあり、他のページでは必要なすべての CSS が含まれるキャッシュされたファイルを使用するシナリオを考えてみましょう。

この場合、minifiedcssforloginpage.scss のようなファイルがあり、グループ化されている可能性があります。ページ.scss。ログイン ページの CSS 読み込みを最適化するには、minifiedcssforloginpage.scss で変数 $load-complete-css を定義し、それを false に設定します。次に、myproject.scss 内で @if ステートメントを使用して CSS モジュールを条件付きでインポートできます。

<code class="scss">@if $load-complete-css {
    @import module1;
    @import module2;
    @import module3;
}</code>

ただし、「インポート ディレクティブはコントロール ディレクティブまたはミックスイン内では使用できません。」というエラーが発生する可能性があります。 」これは、Sass が制御構造内でインポート ディレクティブを許可していないためです。

解決策:

この制限を克服するには、インポートをミックスインに変換します。 @if ステートメントの外側でファイルをインポートし、必要に応じてミックスインを呼び出します。

修正された Sass 構造:

• _partial.scss

<code class="scss">@mixin partial {
    .test { color: red }
    // other styles here
}</code>

• styles.scss

<code class="scss">@import "partial";
@if $someval == true {
    @include partial;
}</code>

ミックスインを使用すると、以下に基づいて CSS モジュールを動的に含めたり除外したりできます。 $load-complete-css の値。このアプローチにより、Sass の @if ステートメント内のインポート ディレクティブの使用に関連するエラーが発生することなく、CSS の読み込みを最適化できます。

以上がSass 条件文で @import 文を使用するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。