Bagaimana untuk Melaksanakan Pemuatan CSS Bersyarat dengan @import dalam Sass?

Memuatkan CSS Bersyarat dengan @import dalam Sass

Dalam Sass, anda mungkin menghadapi keperluan untuk memuatkan CSS secara terpilih berdasarkan syarat tertentu, seperti sebagai halaman semasa. Untuk mencapai ini, anda boleh mempertimbangkan untuk menggunakan arahan @import dalam pernyataan @if. Walau bagaimanapun, pendekatan ini tidak boleh dilaksanakan dalam Sass.

Sass tidak membenarkan penggunaan arahan @import di dalam arahan kawalan atau campuran. Untuk memintas had ini, anda boleh menggunakan pendekatan yang berbeza menggunakan mixin. Dengan mengimport fail di luar penyataan @if dan memanggil campuran yang sesuai di dalamnya, anda boleh mengawal pemuatan CSS secara dinamik.

Pelaksanaan:

Pertimbangkan struktur fail berikut:

minifiedcssforloginpage.scss
grouped-pages.scss
_partial.scss

Dalam minifiedcssforloginpage.scss, tetapkan $load-complete-css kepada false. Kemudian, import myproject.scss yang mengandungi semua modul, reka letak dan import teras.

Dalam myproject.scss, cipta campuran untuk setiap modul seperti berikut:

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

Dalam styles.scss , import _partial.scss dan secara bersyarat sertakan campuran berdasarkan $load-complete-css.

@import "_partial";

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

Dengan mengikuti pendekatan ini, anda boleh memuatkan CSS secara terpilih untuk halaman berbeza sambil mengekalkan kemudahan menggunakan mixin untuk organisasi kod dan kebolehgunaan semula.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pemuatan CSS Bersyarat dengan @import dalam Sass?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!