Mengisytiharkan dan Menggunakan Sifat Tersuai

Sifat tersuai CSS (juga dipanggil pemboleh ubah CSS) membolehkan anda mentakrifkan satu nilai yang boleh digunakan semula dan menggunakannya di seluruh helaian gaya. Sifat ini mengikut sintaks --name: value.

Isytiharkan sifat tersuai pada mana-mana unsur. Pengisytiharan pada :root menjadikannya tersedia secara global:

Rujuk sifat tersuai dengan fungsi var():

Sifat tersuai mengikut pewarisan CSS biasa. Sifat yang ditakrifkan pada induk tersedia kepada semua turunannya melainkan digantikan.

Tidak seperti sifat CSS biasa, nilai sifat tersuai yang tidak sah tidak menyebabkan pengisytiharan diabaikan — pemboleh ubah itu hanya diselesaikan kepada nilainya seadanya. Sifat yang menggunakannya kemudian menentukan sama ada nilai tersebut sah.

Perbezaan utama:

• Sifat tersuai CSS adalah aktif secara langsung dalam pelayar — sifat ini dikemas kini secara dinamik
• Pemboleh ubah Sass dihapuskan pada masa binaan
• Sifat tersuai boleh diubah dengan JavaScript
• Sifat tersuai mematuhi lata dan pewarisan

Namakan sifat tersuai secara semantik, bukan berdasarkan nilai visualnya. Hal ini memudahkannya dikemas kini kemudian:

Takrifkan token global dalam :root dan nilai khusus komponen pada kelas akar komponen:

Sifat tersuai berfungsi di dalam calc() — sifat ini mesti menyertakan unit jika digunakan dalam pengiraan dimensi:

Ubah nilai sifat tersuai di dalam pertanyaan media untuk sistem token responsif:

Animasikan unsur dengan mengubah sifat tersuai (selalunya melalui JavaScript), bukannya mengubah berbilang sifat secara berasingan:

Sifat tersuai CSS diisytiharkan dengan --name: value dan digunakan dengan var(--name). Isytiharkan token global pada :root; hadkan skop nilai komponen kepada pemilih komponen. Sifat ini aktif secara langsung, mengambil kira lata dan boleh diubah oleh JavaScript — menjadikannya jauh lebih berkuasa daripada pemboleh ubah Sass.