Wie implementiert man bedingtes CSS-Laden mit @import in Sass?

Bedingtes Laden von CSS mit @import in Sass

In Sass müssen Sie möglicherweise CSS basierend auf bestimmten Bedingungen selektiv laden, z als aktuelle Seite. Um dies zu erreichen, können Sie die @import-Direktive innerhalb einer @if-Anweisung verwenden. Allerdings ist dieser Ansatz in Sass nicht umsetzbar.

Sass erlaubt nicht die Verwendung von @import-Direktiven innerhalb von Kontrolldirektiven oder Mixins. Um diese Einschränkung zu umgehen, können Sie einen anderen Ansatz verwenden und Mixins verwenden. Durch den Import von Dateien außerhalb der @if-Anweisung und den Aufruf entsprechender Mixins darin können Sie das Laden von CSS dynamisch steuern.

Implementierung:

Beachten Sie die folgende Dateistruktur:

minifiedcssforloginpage.scss
grouped-pages.scss
_partial.scss

Setzen Sie in minifiedcssforloginpage.scss $load-complete-css auf false. Importieren Sie dann „myproject.scss“, das alle Modul-, Layout- und Kernimporte enthält.

Erstellen Sie in „myproject.scss“ Mixins für jedes Modul wie folgt:

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

In „styles.scss“. , importieren Sie _partial.scss und schließen Sie Mixins bedingt auf der Grundlage von $load-complete-css ein.

@import "_partial";

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

Mit diesem Ansatz können Sie selektiv CSS für verschiedene Seiten laden und gleichzeitig den Komfort der Verwendung von Mixins für die Codeorganisation beibehalten und Wiederverwendbarkeit.

Das obige ist der detaillierte Inhalt vonWie implementiert man bedingtes CSS-Laden mit @import in Sass?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!