Bolehkah Pembolehubah SCSS Digunakan Terus Dalam Pemilih CSS?

Sintaks Pemilih Dinamik dalam SCSS

Pembolehubah menawarkan cara yang mudah untuk menentukan parameter helaian gaya CSS, membenarkan kod yang sangat dinamik dan boleh digunakan semula. Walau bagaimanapun, persoalan timbul: bolehkah pembolehubah digunakan dalam pemilih CSS?

Contoh yang diberikan mempamerkan percubaan untuk menggunakan pembolehubah, $gutter, dalam pemilih seperti berikut:

<code class="scss">.grid+$gutter {
    background: red;
}</code>

The output yang dikehendaki ialah pemilih kelas, .grid10, dengan warna latar belakang merah. Walau bagaimanapun, sintaks tertentu ini tidak sah dalam SCSS.

Untuk mencapai kefungsian yang diingini, SCSS menawarkan sintaks alternatif yang melibatkan #{} pemegang tempat:

<code class="scss">.grid#{$gutter} {
    background: red;
}</code>

Dalam kes ini, pembolehubah $gutter diinterpolasi ke dalam pemilih menggunakan sintaks #{}. Output CSS yang terhasil ialah:

<code class="css">.grid10 {
    background: red;
}</code>

Selain itu, pembolehubah boleh diinterpolasi dalam konteks rentetan, seperti URL:

<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff')</code>

Ini membolehkan pembinaan dinamik URL dan berasaskan rentetan lain hartanah.

Atas ialah kandungan terperinci Bolehkah Pembolehubah SCSS Digunakan Terus Dalam Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!