Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menggunakan Pembolehubah dalam Pemilih CSS dengan SCSS?

Bagaimanakah Saya Boleh Menggunakan Pembolehubah dalam Pemilih CSS dengan SCSS?

Linda Hamilton
Lepaskan: 2024-11-04 03:00:02
asal
460 orang telah melayarinya

How Can I Use Variables in CSS Selectors with 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>
Salin selepas log masuk

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>
Salin selepas log masuk

Ini akan menjana CSS berikut:

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

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan