Bagaimana untuk Menggunakan Pernyataan @import dalam Pernyataan Bersyarat Sass?

Menggunakan @import dalam @if Penyata dalam Sass

Semasa menggunakan Sass, anda mungkin menghadapi situasi di mana anda ingin memuatkan CSS secara terpilih bergantung pada konteks. Pertimbangkan senario di mana anda mempunyai halaman log masuk yang memerlukan CSS dioptimumkan sendiri, manakala halaman lain menggunakan fail cache dengan semua CSS yang diperlukan.

Dalam kes ini, anda mungkin mempunyai fail seperti minifiedcssforloginpage.scss dan berkumpulan- pages.scss. Untuk mengoptimumkan pemuatan CSS untuk halaman log masuk, anda mungkin mentakrifkan pembolehubah $load-complete-css dalam minifiedcssforloginpage.scss dan tetapkannya kepada false. Kemudian, anda boleh menggunakan pernyataan @if dalam myproject.scss untuk mengimport modul CSS secara bersyarat.

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

Walau bagaimanapun, anda mungkin menghadapi ralat yang menyatakan bahawa "Arahan import mungkin tidak digunakan dalam arahan kawalan atau campuran. " Ini kerana Sass tidak membenarkan arahan import dalam struktur kawalan.

Penyelesaian:

Untuk mengatasi pengehadan ini, anda boleh menukar import anda kepada campuran. Import fail di luar pernyataan @if dan kemudian panggil mixin jika sesuai.

Struktur Sass Diubah Suai:

• _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>

Dengan menggunakan mixin, anda boleh memasukkan atau mengecualikan modul CSS secara dinamik berdasarkan nilai $load-complete-css. Pendekatan ini membenarkan pemuatan CSS yang dioptimumkan tanpa menghadapi ralat yang dikaitkan dengan penggunaan arahan import dalam penyataan @if dalam Sass.

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