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 중국어 웹사이트의 기타 관련 기사를 참조하세요!