How to Implement Conditional CSS Loading with @import in Sass?

Conditional CSS Loading with @import in Sass

In Sass, you may encounter a need to selectively load CSS based on specific conditions, such as the current page. To achieve this, you may consider using the @import directive within an @if statement. However, this approach is not feasible in Sass.

Sass does not allow the use of @import directives inside control directives or mixins. To circumvent this limitation, you can employ a different approach using mixins. By importing files outside the @if statement and calling appropriate mixins within it, you can dynamically control the CSS loading.

Implementation:

Consider the following file structure:

minifiedcssforloginpage.scss
grouped-pages.scss
_partial.scss

In minifiedcssforloginpage.scss, set $load-complete-css to false. Then, import myproject.scss which contains all the module, layout, and core imports.

In myproject.scss, create mixins for each module as follows:

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

In styles.scss, import _partial.scss and conditionally include mixins based on $load-complete-css.

@import "_partial";

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

By following this approach, you can selectively load CSS for different pages while maintaining the convenience of using mixins for code organization and reusability.

The above is the detailed content of How to Implement Conditional CSS Loading with @import in Sass?. For more information, please follow other related articles on the PHP Chinese website!