Bagaimanakah Saya Boleh Menggunakan Pembolehubah dalam Pemilih CSS dengan SCSS?

Menggunakan Pembolehubah untuk Pemilih CSS dalam SCSS

Dalam SCSS, pembolehubah ialah alat yang berkuasa untuk menyimpan nilai dinamik dan menggunakannya semula sepanjang helaian gaya anda. Walau bagaimanapun, menggunakan pembolehubah secara langsung dalam pemilih CSS adalah tidak mudah.

Andaikan anda mempunyai pembolehubah $gutter ditetapkan kepada 10. Anda mungkin mahu menggunakannya dalam pemilih untuk menjana nama kelas secara dinamik berdasarkan nilai $ longkang.

Masalah:

Jika anda cuba menggunakan pembolehubah dalam pemilih secara langsung, seperti ini:

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

Ia akan mengakibatkan kelas CSS yang tidak sah. Outputnya tidak akan menjadi .grid10, seperti yang dijangkakan.

Penyelesaian:

Untuk menggunakan pembolehubah dalam pemilih CSS, anda perlu menggunakan #{$var-name} sintaks. Kod di bawah menunjukkan cara menggunakan pembolehubah $gutter untuk menjana nama kelas:

<code class="scss">$gutter: 10;

.grid#{$gutter} {
    background: red;
}</code>

Ini akan menjana CSS berikut:

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

Perhatikan bahawa # diperlukan sebelum nama pembolehubah.

Nota Tambahan:

Sintaks #{$var-name} juga boleh digunakan untuk memasukkan pembolehubah dalam rentetan, seperti dalam URL:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pembolehubah dalam Pemilih CSS dengan SCSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!