Interpolasi Pembolehubah dalam Pemilih
Dalam SCSS, pembolehubah menyimpan nilai yang boleh dirujuk di seluruh helaian gaya. Walau bagaimanapun, menggunakan pembolehubah secara langsung sebagai pemilih menimbulkan batasan tertentu. Mari kita terokai senario ini dan cari penyelesaian.
Cabaran: Menggunakan Pembolehubah dalam Pemilih
Anda mempunyai pembolehubah $gutter ditetapkan kepada 10 dan ingin menggunakannya dalam pemilih .grid $gutter. Kod ini cuba mencipta kelas .grid10 dengan latar belakang merah. Walau bagaimanapun, ia gagal untuk menyusun.
Penyelesaian: Interpolasi dengan #{$}
Untuk menggunakan pembolehubah dalam pemilih, kita perlu menggunakan interpolasi menggunakan #{$} sintaks. Begini caranya:
<code class="scss">$gutter: 10; .grid#{$gutter} { background: red; }</code>
Dengan menyertakan pembolehubah $gutter dalam #{$}, kami menginterpolasi nilainya ke dalam rentetan pemilih, menghasilkan .grid10. Ini akan menghasilkan CSS yang diingini:
<code class="css">.grid10 { background: red; }</code>
Apabila digunakan dalam rentetan, seperti untuk URL, interpolasi berfungsi sama:
<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff');</code>
Nota Tambahan:
Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menggunakan Pembolehubah dalam Pemilih dalam SCSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!