Cara Menggunakan Pembolehubah dalam CSS: CSS Custom Properties

pembolehubah CSS (secara rasmi dikenali sebagai sifat tersuai) adalah nilai yang ditetapkan pengguna yang boleh ditetapkan sekali dan digunakan banyak kali di seluruh codebase anda. Mereka memudahkan untuk menguruskan warna, fon, saiz, dan nilai animasi, dan memastikan konsistensi merentasi aplikasi web.

Sebagai contoh, anda boleh menetapkan warna jenama sebagai harta CSS (--PrimaryColor: #7232FA) dan gunakan nilai ini dalam mana-mana komponen atau gaya yang menggunakan warna jenama anda (latar belakang: var (-primaryColor);).

Selain menawarkan kod bersih dan tidak berulang, pembolehubah CSS boleh digunakan untuk membina palet warna, meningkatkan respons, dan membuat sistem jenis dinamik.

Jawatan ini diekstrak dari panduan saya, CSS Master, yang mengajar anda untuk menulis CSS yang lebih baik dan lebih cekap. Anda juga akan belajar untuk menguasai alat yang akan meningkatkan aliran kerja anda dan membina aplikasi yang lebih baik.

Takeaways Key

Pengenalan kepada CSS Custom Ciri -ciri: Pembolehubah CSS, atau sifat tersuai, membolehkan pemaju untuk menentukan nilai sekali dan menggunakannya semula sepanjang stylesheet. Ini meningkatkan pemeliharaan kod dan konsistensi di seluruh aplikasi web dengan memudahkan pengurusan warna, fon, saiz, dan nilai animasi. Sifat tersuai boleh digunakan secara meluas di seluruh projek, membolehkan kemas kini dinamik dan pelarasan tematik dengan usaha yang minimum.
Kelebihan dan aplikasi pembolehubah CSS: Di luar hanya membersihkan kod dengan mengurangkan pengulangan, pembolehubah CSS membuka kunci potensi untuk mewujudkan tema dinamik, reka bentuk responsif, dan skala jenis sistematik. Mereka memainkan peranan penting dalam menguruskan palet warna dan susun atur yang kompleks, memudahkan penyesuaian yang lebih mudah untuk mereka bentuk elemen berdasarkan interaksi pengguna atau keadaan persekitaran, seperti beralih antara mod cahaya dan gelap.
Pelaksanaan praktikal dan fungsi lanjutan: Melalui contoh, artikel ini menggambarkan bagaimana untuk menentukan, menggunakan, dan memanipulasi sifat adat CSS untuk pelbagai tujuan, termasuk tema dan responsif. Ia menyoroti kepelbagaian pembolehubah CSS bersempena dengan pertanyaan media dan JavaScript, mempamerkan potensi mereka untuk menyelaraskan strategi gaya dengan ketara, terutamanya dalam rangka kerja berasaskan komponen seperti React, Sudut, dan Vue. Pendekatan ini menggalakkan cara modular, dipelihara, dan berskala untuk membina antara muka web.
Mendefinisikan harta tersuai CSS

Untuk menentukan harta tersuai, pilih nama dan awalannya dengan dua tanda hubung. Mana -mana watak alfanumerik boleh menjadi sebahagian daripada nama. Hyphen (-) dan aksara underscore (_) juga dibenarkan. Pelbagai watak Unicode boleh menjadi sebahagian daripada nama harta tersuai. Ini termasuk emoji, tetapi demi kejelasan dan kebolehbacaan, berpegang pada nama alfanumerik.

Berikut adalah contoh:

<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

yang menunjukkan kepada parser CSS bahawa ini adalah harta tersuai. Apabila digunakan sebagai pemboleh ubah, enjin parsing menggantikan harta dengan nilainya.

Nama harta tersuai adalah sensitif kes . Ini bermakna --PrimaryColor dan --PrimaryColor dianggap dua nama harta yang berbeza. Itulah pemergian dari CSS tradisional, di mana harta dan kes nilai tidak penting. Walau bagaimanapun, ia selaras dengan peraturan untuk nama pembolehubah dalam ECMAScript.

Seperti sifat -sifat lain, seperti paparan atau fon, sifat adat CSS mesti ditakrifkan dalam blok pengisytiharan. Satu corak biasa adalah untuk menentukan sifat tersuai menggunakan: pseudo-unsur akar sebagai pemilih:

<span><span>:root</span> {
</span>  <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>

: Root adalah elemen pseudo yang merujuk kepada elemen akar dokumen. Untuk dokumen HTML, itulah elemen . Untuk dokumen SVG, ia adalah elemen

menggunakan pembolehubah CSS

Untuk menggunakan harta tersuai sebagai pembolehubah, kita perlu menggunakan fungsi VAR (). Sebagai contoh, jika kita mahu menggunakan harta Custom --PrimaryColor kita sebagai warna latar belakang, kita akan melakukan perkara berikut:

<span>body {
</span>    <span>background-color: var(--primarycolor);
</span><span>}</span>

Nilai harta tersuai kami akan menjadi nilai yang dikira dari harta warna latar belakang.

Sehingga kini, sifat tersuai hanya boleh digunakan sebagai pembolehubah untuk menetapkan nilai untuk sifat CSS standard. Anda tidak boleh, sebagai contoh, menyimpan harta nama sebagai pemboleh ubah dan kemudian menggunakannya semula. CSS berikut tidak akan berfungsi:

<span><span>:root</span> {
</span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
</span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
</span><span>}</span>

anda juga tidak dapat menyimpan nilai harta pasangan sebagai pembolehubah dan menggunakannya semula. Contoh berikut juga tidak sah:

<span><span>:root</span> {
</span>    <span>--text-color: 'color: orange'; /* Invalid property value */
</span><span>}
</span><span>body {
</span>    <span>var(--text-color); /* Invalid use of a property */
</span><span>}</span>

Akhir sekali, anda tidak boleh menggabungkan pembolehubah sebagai sebahagian daripada rentetan nilai:

<span><span>:root</span> {
</span>    <span>--base-font-size: 10;
</span><span>}
</span><span>body {
</span>    <span>font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
</span><span>}</span>

CSS Custom Property vs. CSS Variable

"Harta Tersuai" adalah nama masa depan yang menyumbang bagaimana ciri ini boleh digunakan suatu hari nanti. Walau bagaimanapun, ini boleh berubah sekiranya spesifikasi sambungan CSS dilaksanakan oleh vendor penyemak imbas. Spesifikasi itu mentakrifkan cara untuk memperluaskan CSS dengan kombinasi, fungsi, dan aturan pemilih tersuai.

kita biasanya memanggil sifat tersuai "pembolehubah", dan setakat ini, itulah satu -satunya cara kita boleh menggunakannya. Secara teori, mereka tidak sepenuhnya boleh ditukar ganti. Dalam amalan dan buat masa ini, mereka. Saya kebanyakannya akan menggunakan Custom Properties dalam jawatan ini, kerana itu nama yang betul. Saya akan menggunakan pembolehubah apabila ia membuat ayat lebih jelas.

menetapkan nilai sandaran

Fungsi VAR () menerima sehingga dua argumen. Hujah pertama harus menjadi nama harta tersuai. Hujah kedua adalah pilihan, tetapi mesti menjadi nilai pengisytiharan. Nilai pengisytiharan ini berfungsi sebagai nilai sandaran atau lalai yang digunakan apabila nilai harta tersuai tidak ditakrifkan.

mari kita ambil CSS berikut:

<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

Jika-warna-warna ditakrifkan-mari kita katakan nilainya adalah#f30-maka warna mengisi untuk mana-mana jalan dengan atribut kelas .btn__call-to-action akan mempunyai mengisi oren merah. Jika ia tidak ditakrifkan, mengisi akan menjadi langit biru yang mendalam.

Nilai pengisytiharan juga boleh bersarang. Dengan kata lain, anda boleh menggunakan pembolehubah sebagai nilai sandaran untuk fungsi VAR:

<span><span>:root</span> {
</span>  <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>

Dalam CSS di atas, jika-buku-bg ditakrifkan, warna latar belakang akan ditetapkan kepada nilai harta-buku-bg. Jika tidak, warna latar belakang sebaliknya akan menjadi apa sahaja nilai yang diberikan kepada --Arts-bg. Sekiranya tidak ada yang ditakrifkan, warna latar belakang akan menjadi nilai awal untuk harta -dalam kes ini, telus.

Sesuatu yang serupa berlaku apabila harta tersuai mempunyai nilai yang tidak sah untuk harta yang digunakannya. Pertimbangkan CSS berikut:

<span>body {
</span>    <span>background-color: var(--primarycolor);
</span><span>}</span>

Dalam kes ini, nilai harta-kaki-link-hover harta bukan warna yang sah. Sebaliknya, Footer A: Hover mewarisi warna dari elemen

.

sifat tersuai diselesaikan dengan cara yang sama nilai CSS lain diselesaikan. Sekiranya nilai tidak sah atau tidak ditentukan, parser CSS akan menggunakan nilai yang diwarisi jika harta itu diwarisi (seperti warna atau fon), dan nilai awal jika tidak (seperti warna latar belakang).

nilai cascading

sifat tersuai juga mematuhi peraturan lata. Nilai mereka boleh ditindih oleh peraturan berikutnya:

<span><span>:root</span> {
</span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
</span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
</span><span>}</span>

Dalam contoh di atas, teks badan kita akan menjadi kelabu gelap. Kita juga boleh menetapkan semula nilai secara per-selektor. Mari kita tambahkan lebih banyak peraturan ke CSS ini:

<span><span>:root</span> {
</span>    <span>--text-color: 'color: orange'; /* Invalid property value */
</span><span>}
</span><span>body {
</span>    <span>var(--text-color); /* Invalid use of a property */
</span><span>}</span>

Dalam kes ini, mana -mana teks yang dibungkus dalam

tag elemen akan menjadi oren. Tetapi teks dalam

atau unsur -unsur lain masih akan menjadi kelabu gelap.

Anda juga boleh menetapkan nilai harta tersuai menggunakan atribut gaya-contohnya, gaya = "-Brand-color: #9A09AF".

sifat tersuai dan palet warna

Custom Properties berfungsi dengan baik untuk menguruskan palet warna HSL.  HSL bermaksud hue, ketepuan, ringan . Ia adalah model warna berasaskan cahaya yang serupa dengan RGB. Kita boleh menggunakan nilai HSL dalam CSS terima kasih kepada fungsi warna HSL () dan HSLA (). Fungsi HSL () menerima tiga argumen: warna, ketepuan, dan ringan. Fungsi HLSA () juga menerima hujah keempat, menunjukkan ketelusan alfa warna (nilai antara 0 dan 1).

Walaupun sistem RGB mengekspresikan warna sebagai perkadaran merah, hijau, dan biru, HSL menggunakan bulatan warna di mana warna adalah kedudukan ijazah pada bulatan itu, dan nada atau naungan ditakrifkan menggunakan nilai ketepuan dan ringan. Ketepuan boleh berkisar antara 0% hingga 100%, di mana 0% adalah kelabu dan 100% adalah warna penuh. Cahaya juga boleh berkisar dari 0% hingga 100%, di mana 0% hitam, 100% putih, dan 50% adalah warna normal.

roda kromatik oleh Crazyterabyte dari OpenClipart.

Dalam sistem warna HSL, warna utama merah, hijau, dan biru terletak 120 darjah selain pada 0 darjah/360 darjah, 120 darjah, dan 240 darjah. Warna -warna sekunder -cyan, magenta, dan kuning -juga 120 darjah, tetapi duduk di seberang warna utama, pada 180 darjah, 300 darjah, dan 60 darjah/420 darjah masing -masing. Tersier, Quaternary, dan warna-warna lain jatuh di antara kira-kira kenaikan sepuluh darjah. Biru, yang ditulis menggunakan notasi HSL, akan menjadi HSL (240, 100%, 50%).

unit argumen HSL

Apabila anda menggunakan nilai Unitless untuk hujah pertama fungsi HSL () dan HSLA (), pelayar menganggap bahawa ia adalah sudut dalam unit ijazah. Walau bagaimanapun, anda boleh menggunakan mana -mana unit sudut CSS yang disokong. Biru juga boleh dinyatakan sebagai HSL (240DEG, 100%, 50%), HSL (4.188RAD, 100%, 50%) atau HSLA (0.66Turn, 100%50%).

Di sinilah ia bersenang -senang. Kami boleh menetapkan nilai warna kami menggunakan harta tersuai, dan menetapkan warna yang lebih ringan dan lebih gelap dengan menyesuaikan nilai ketepuan dan ringan:

<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

CSS di atas memberi kita palet yang ditunjukkan di bawah.

Ini adalah versi mudah, tetapi anda juga boleh menggunakan sifat tersuai untuk menyesuaikan nilai ketepuan dan ringan.

Generasi palet yang kuat

Dieter Raber membincangkan teknik untuk generasi palet yang mantap dalam "Mewujudkan tema warna dengan sifat tersuai, HSL, dan sedikit calc ()".

Idea lain adalah untuk menggabungkan sifat tersuai dan fungsi Calc () untuk menghasilkan skema warna persegi dari warna asas. Mari buat skema warna persegi dalam contoh seterusnya. Skema warna

persegi terdiri daripada empat warna yang sama antara satu sama lain pada roda warna -iaitu, 90 darjah selain:

sedikit CSS ini memberi kita skema warna yang diilhamkan oleh tropika yang ditunjukkan di bawah.

<span><span>:root</span> {
</span>  <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>

Custom Properties juga berfungsi dengan baik dengan pertanyaan media, seperti yang akan kita lihat di bahagian kemudian.

menggunakan pembolehubah CSS untuk membuat palet tema gelap

Anda boleh menggunakan sifat tersuai CSS untuk menentukan set pembolehubah untuk kedua -dua tema gelap dan ringan di laman web anda.

Ambil contoh di bawah gaya halaman, kita boleh menggantikan semua warna HSL dalam pemilih yang berbeza dengan pembolehubah selepas menentukan sifat tersuai untuk warna yang sepadan dalam: akar:

<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

Nama yang sesuai untuk sifat tersuai telah digunakan. Sebagai contoh, --nav-bg-color merujuk kepada warna latar belakang nav , manakala-nav-teks-warna merujuk kepada warna latar depan/teks .

Sekarang duplikat: pemilih root dengan kandungannya, tetapi tambahkan atribut tema dengan gelap nilai:

<span><span>:root</span> {
</span>  <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>

Tema ini akan diaktifkan jika tema atribut dengan nilai gelap ditambah ke elemen .

sekarang kita boleh bermain dengan nilai -nilai pembolehubah ini secara manual, dengan mengurangkan nilai ringan warna HSL untuk memberikan tema gelap, atau kita boleh menggunakan teknik lain seperti penapis CSS seperti Invert () dan kecerahan (), yang mana biasanya digunakan untuk menyesuaikan rendering imej tetapi juga boleh digunakan dengan elemen lain.

Tambahkan kod berikut ke: root [tema = 'gelap']:

<span>body {
</span>    <span>background-color: var(--primarycolor);
</span><span>}</span>

penapis invert () membalikkan semua warna dalam elemen yang dipilih (setiap elemen dalam kes ini). Nilai penyongsangan boleh ditentukan dalam peratusan atau nombor. Nilai 100%atau 1 akan sepenuhnya membalikkan nilai warna, ketepuan, dan ringan dari elemen.

Penapis kecerahan () menjadikan elemen lebih cerah atau lebih gelap. Nilai 0 menghasilkan elemen yang benar -benar gelap.

Penapis invert () membuat beberapa elemen sangat cerah. Ini dikurangkan dengan menetapkan kecerahan (0.6).

Tema gelap dengan tahap kegelapan yang berbeza:

Menukar tema dengan JavaScript

Mari kita gunakan JavaScript untuk bertukar antara tema gelap dan cahaya apabila pengguna mengklik butang

Dark/Light . Dalam HTML anda tambahkan inline <script> sebelum penutupan dengan kod berikut: </script>

<span><span>:root</span> {
</span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
</span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
</span><span>}</span>

document.documentElement merujuk kepada elemen dom root dokumen - iaitu, . Kod ini menyemak untuk kewujudan atribut

atribut menggunakan kaedah. tema. Jika tidak, ia menghilangkan atribut, yang mengakibatkan beralih ke tema cahaya. NOTA: Anda juga harus menggunakan ini dalam kombinasi dengan ciri-ciri-ciri-skema dalam CSS, yang boleh digunakan untuk mengubah tema cahaya/gelap secara automatik dari sistem operasi pengguna atau tetapan ejen pengguna (penyemak imbas). Ini ditunjukkan dalam bahagian seterusnya.

menggunakan sifat tersuai dan pertanyaan media

Kami juga boleh menggunakan sifat tersuai dengan pertanyaan media. Sebagai contoh, anda boleh menggunakan sifat tersuai untuk menentukan skema warna cahaya dan gelap:

<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

Begitu juga, kita boleh menggunakan sifat tersuai untuk menukar saiz fon asas untuk skrin berbanding cetak:

<span><span>:root</span> {
</span>  <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>

Dalam kes ini, kami menggunakan unit yang sesuai dengan media untuk cetakan dan skrin. Bagi kedua -dua media, kami akan menggunakan saiz fon asas 10 unit -piksel untuk skrin, mata untuk dicetak. Kami juga akan menggunakan nilai-base-font-saiz: untuk menetapkan saiz permulaan untuk elemen akar kami (HTML). Kami kemudian boleh menggunakan unit REM untuk saiz tipografi kami berbanding dengan saiz fon asas.

menggunakan sifat tersuai dengan JavaScript

ingat: sifat tersuai adalah sifat CSS, dan kita boleh berinteraksi dengan mereka seperti itu. Sebagai contoh, kita boleh menggunakan CSS.Supports () API untuk menguji sama ada penyemak imbas menyokong sifat tersuai:

<span>body {
</span>    <span>background-color: var(--primarycolor);
</span><span>}</span>

kita juga boleh menggunakan kaedah setProperty () untuk menetapkan nilai harta tersuai:

<span><span>:root</span> {
</span>    <span>--top-border: border-top; /* Can't set a property as custom property's value */
</span>    <span>var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
</span><span>}</span>

Menggunakan RoveProperty () berfungsi sama. Lulus nama harta tersuai sebagai hujah:

<span><span>:root</span> {
</span>    <span>--text-color: 'color: orange'; /* Invalid property value */
</span><span>}
</span><span>body {
</span>    <span>var(--text-color); /* Invalid use of a property */
</span><span>}</span>

Untuk menggunakan harta tersuai sebagai nilai dengan JavaScript, gunakan fungsi VAR () dengan nama harta sebagai argumennya:

<span><span>:root</span> {
</span>    <span>--base-font-size: 10;
</span><span>}
</span><span>body {
</span>    <span>font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
</span><span>}</span>

Alas, anda tidak boleh menetapkan sifat tersuai menggunakan sintaks persegi-braket atau sifat camelcased objek gaya. Dalam erti kata lain, document.body.style tidak .-- BG-Home nor document.body.style ['-bg-home'] akan berfungsi.

sifat dan komponen tersuai

Rangka kerja JavaScript seperti React, Sudut dan Vue membiarkan pemaju menggunakan JavaScript untuk membuat blok HTML yang boleh diguna semula, sering dengan CSS yang ditakrifkan pada tahap komponen.

Berikut adalah contoh komponen React, yang ditulis dalam

jsx, lanjutan sintaks untuk JavaScript:

<span><span>.btn__call-to-action</span> {
</span>    <span>background: var(--accent-color, deepskyblue);
</span><span>}</span>

lebih banyak mengenai kerangka JavaScript

SitePoint mempunyai sumber yang luas mengenai React, Sudut dan Vue jika anda ingin mengetahui lebih lanjut mengenai bekerja dengan kerangka JavaScript. Untuk React, semak

minggu pertama anda dengan reaksi dan artikel React yang luas. Untuk sudut, ada belajar sudut: minggu pertama anda dan banyak artikel dan tutorial sudut. Untuk Vue, lihat Jump Start Vue.js dan lebih banyak artikel Vue.

Komponen React kami mengimport CSS ke dalam fail JavaScript. Apabila disusun, kandungan medan button.css dimuatkan dalam talian. Berikut adalah satu cara yang mungkin untuk menggunakan ini dengan sifat tersuai:

<span>body {
</span>    <span>background-color: var(--books-bg, var(--arts-bg));
</span><span>}</span>

Dalam contoh ini, kami telah menggunakan harta benda--butang-bg-color custom-untuk warna latar belakang butang, bersama dengan warna lalai dalam kes-button-bg-color tidak pernah ditakrifkan. Dari sini, kita boleh menetapkan nilai-button-bg-color, sama ada dalam lembaran gaya global atau secara tempatan melalui atribut gaya.

mari kita tetapkan nilai sebagai reaksi "prop". React

props (pendek untuk sifat ) meniru atribut elemen. Mereka adalah cara untuk menyampaikan data ke dalam komponen React. Dalam kes ini, kami akan menambah prop bernama ButtonBGColor:

<span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

Sekarang kita perlu mengemas kini FieldButTonGroup kami untuk menyokong perubahan ini:

<span><span>:root</span> {
</span>  <span>--primarycolor: #0ad0f9ff;
</span><span>}</span>

Dalam kod di atas, kami telah menambah objek ButtonStyle yang memegang nama harta tersuai kami dan menetapkan nilainya dengan Prop ButtonBGColor kami, dan Atribut Gaya ke butang kami.

Menggunakan atribut Gaya mungkin bertentangan dengan semua yang anda telah diajar tentang menulis CSS. Titik jualan CSS ialah kita boleh menentukan satu set gaya untuk digunakan merentasi pelbagai dokumen HTML dan XML. Atribut gaya, sebaliknya, mengehadkan skop CSS ke elemen yang digunakan. Kita tidak boleh menggunakannya semula. Dan kita tidak boleh memanfaatkan lata itu.

Tetapi dalam komponen, seni bina front-end, satu komponen boleh digunakan dalam pelbagai konteks, oleh pelbagai pasukan, atau mungkin dikongsi di seluruh projek klien. Dalam kes tersebut, anda mungkin mahu menggabungkan "skop global" lata dengan "skop tempatan" sempit yang disediakan oleh atribut gaya.

Menetapkan nilai harta tersuai dengan atribut gaya mengehadkan kesan kepada

contoh tertentu komponen fieldbuttongroup. Tetapi kerana kami telah menggunakan harta tersuai dan bukannya harta CSS standard, kami masih mempunyai pilihan untuk menentukan-button-bg-color dalam stylesheet yang dipautkan dan bukan sebagai komponen prop. Kesimpulan

sifat tersuai mengambil salah satu ciri terbaik pra-proses-pembolehubah-dan menjadikannya asli kepada CSS. Dengan sifat tersuai, kita boleh:

Buat komponen bertema yang boleh diguna semula

• mudah menyesuaikan padding, margin, dan tipografi untuk pelbagai saiz viewport dan media
• Meningkatkan konsistensi nilai warna dalam CSS kami
pembolehubah mempunyai pelbagai aplikasi, dan sangat berguna dalam sistem reka bentuk berasaskan komponen.

Saya harap anda kini mempunyai pemahaman yang lebih baik tentang cara menggunakan pembolehubah, atau sifat tersuai, dalam CSS. Semak buku saya, CSS Master, untuk melanjutkan pengetahuan CSS anda dan dapatkan petua yang lebih berguna seperti ini.

Soalan Lazim mengenai CSS Custom Properties

Apakah sifat adat CSS?

CSS Custom Ciri -ciri, juga dikenali sebagai pembolehubah CSS, adalah entiti yang ditakrifkan oleh pemaju untuk menyimpan dan menggunakan semula nilai dalam lembaran styles. Mereka bermula dengan awalan-seperti-warna-warna, dan boleh diberikan nilai untuk digunakan sepanjang stylesheet.

Bagaimana saya mengisytiharkan harta tersuai CSS?

Untuk mengisytiharkan harta tersuai CSS, gunakan awalan-diikuti dengan nama, seperti-warna-warna. Anda memberikan nilai kepadanya menggunakan fungsi var (), seperti var (-warna utama: #3498db).

Apakah kelebihan menggunakan sifat adat CSS?

CSS Custom Properties menawarkan cara yang lebih fleksibel dan boleh dipelihara untuk menguruskan gaya. Mereka membenarkan mudah, kemas kini cepat, dan pemusatan nilai, mempromosikan kod bersih dan lebih modular.

Bolehkah sifat tersuai CSS digunakan untuk lebih daripada sekadar warna?

Ya, sifat adat CSS boleh digunakan untuk pelbagai jenis nilai, termasuk warna, saiz fon, jarak, dan banyak lagi. Mereka menyediakan cara untuk memarameterkan apa -apa nilai dalam stylesheets anda.

Adakah sifat tersuai CSS diwarisi?

Ya, CSS Custom Ciri -ciri mengikuti peraturan warisan standard. Sekiranya harta tidak ditakrifkan pada elemen, ia akan mewarisi nilai dari ibu bapanya. Ini menjadikan mereka kuat untuk mewujudkan sistem reka bentuk yang konsisten.

Bolehkah sifat tersuai CSS digunakan dalam pertanyaan media?

Ya, CSS Custom Ciri -ciri boleh digunakan dalam pertanyaan media. Ini membolehkan tindak balas yang lebih dinamik dengan menyesuaikan nilai harta berdasarkan saiz skrin atau ciri media lain.

Atas ialah kandungan terperinci Cara Menggunakan Pembolehubah dalam CSS: CSS Custom Properties. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!