Saatnya Mulai Menggunakan Properti Kustom CSS

Kami menggunakan praprosesor untuk menyimpan warna, preferensi font, detail tata letak — sebagian besar semua yang kami gunakan di CSS.

Tetapi variabel preprocessor memiliki beberapa keterbatasan:

• Anda tidak dapat mengubahnya secara dinamis.
• Mereka tidak mengetahui struktur DOM.
• Mereka tidak dapat dibaca atau diubah dari JavaScript.

Sebagai peluru perak untuk ini dan masalah lainnya, komunitas menemukan properti kustom CSS. Pada dasarnya, ini terlihat dan berfungsi seperti variabel CSS, dan cara kerjanya tercermin dalam namanya.

Properti khusus membuka cakrawala baru untuk pengembangan web.

Sintaks Untuk Menyatakan Dan Menggunakan Properti Kustom

Masalah yang biasa terjadi saat Anda memulai dengan praprosesor atau kerangka kerja baru adalah Anda harus mempelajari sintaks baru.

Setiap preprocessor membutuhkan cara yang berbeda untuk mendeklarasikan variabel. Biasanya, ini dimulai dengan simbol yang dicadangkan — misalnya, $ di Sass dan @ di KURANG.

Properti kustom CSS telah menggunakan cara yang sama dan menggunakan -​- untuk memperkenalkan deklarasi. Tetapi hal baiknya di sini adalah Anda dapat mempelajari sintaks ini sekali dan menggunakannya kembali di seluruh browser!

Anda mungkin bertanya, “Mengapa tidak menggunakan kembali sintaks yang ada?”

Ada alasan. Singkatnya, ini untuk menyediakan cara agar properti kustom dapat digunakan di praprosesor apa pun. Dengan cara ini, kami dapat menyediakan dan menggunakan properti khusus, dan praprosesor kami tidak akan mengompilasinya, sehingga properti akan langsung menuju ke CSS keluaran. Dan , Anda dapat menggunakan kembali variabel praprosesor dalam variabel asli, tetapi saya akan menjelaskannya nanti.

(Mengenai nama: Karena ide dan tujuannya sangat mirip, terkadang properti kustom disebut variabel CSS, meskipun nama yang benar adalah properti kustom CSS, dan membaca lebih lanjut, Anda akan memahami mengapa nama ini paling tepat menggambarkannya.)

Jadi, untuk mendeklarasikan variabel alih-alih properti CSS biasa seperti color atau padding , cukup sediakan properti dengan nama khusus yang dimulai dengan -​- :

 .box{ --box-color: #4d4e53; --box-padding: 0 10px; }

Nilai properti dapat berupa nilai CSS yang valid: warna, string, nilai tata letak, bahkan ekspresi.

Berikut adalah contoh properti khusus yang valid:

 :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px); /* Valid CSS custom properties can be reused later in, say, JavaScript. */ --foo: if(x > 5) this.width = 10; }

Jika Anda tidak yakin dengan :root apa yang cocok, dalam HTML sama dengan html tetapi dengan spesifisitas yang lebih tinggi.

Seperti properti CSS lainnya, properti kustom mengalir dengan cara yang sama dan dinamis. Ini berarti mereka dapat diubah kapan saja dan perubahan tersebut diproses sesuai dengan itu oleh browser.

Untuk menggunakan variabel, Anda harus menggunakan fungsi var() CSS dan memberikan nama properti di dalamnya:

 .box{ --box-color:#4d4e53; --box-padding: 0 10px; padding: var(--box-padding); } .box div{ color: var(--box-color); }

Deklarasi dan Kasus Penggunaan

Fungsi var() adalah cara praktis untuk memberikan nilai default. Anda mungkin melakukan ini jika Anda tidak yakin apakah properti kustom telah ditentukan dan ingin memberikan nilai untuk digunakan sebagai fallback. Ini dapat dilakukan dengan mudah dengan meneruskan parameter kedua ke fungsi:

 .box{ --box-color:#4d4e53; --box-padding: 0 10px; /* 10px is used because --box-margin is not defined. */ margin: var(--box-margin, 10px); }

Seperti yang Anda harapkan, Anda dapat menggunakan kembali variabel lain untuk mendeklarasikan variabel baru:

 .box{ /* The --main-padding variable is used if --box-padding is not defined. */ padding: var(--box-padding, var(--main-padding)); --box-text: 'This is my box'; /* Equal to --box-highlight-text:'This is my box with highlight'; */ --box-highlight-text: var(--box-text)' with highlight'; }

Operasi: +, -, *, /

Karena kami terbiasa dengan praprosesor dan bahasa lain, kami ingin dapat menggunakan operator dasar saat bekerja dengan variabel. Untuk ini, CSS menyediakan fungsi calc() , yang membuat browser menghitung ulang ekspresi setelah ada perubahan pada nilai properti kustom:

 :root{ --indent-size: 10px; --indent-xl: calc(2*var(--indent-size)); --indent-l: calc(var(--indent-size) + 2px); --indent-s: calc(var(--indent-size) - 2px); --indent-xs: calc(var(--indent-size)/2); }

Masalah menunggu jika Anda mencoba menggunakan nilai tanpa unit. Sekali lagi, calc() adalah teman Anda, karena tanpanya, itu tidak akan berfungsi:

 :root{ --spacer: 10; } .box{ padding: var(--spacer)px 0; /* DOESN'T work */ padding: calc(var(--spacer)*1px) 0; /* WORKS */ }

Lingkup dan Warisan

Sebelum berbicara tentang cakupan properti kustom CSS, mari mengingat kembali cakupan JavaScript dan praprosesor, untuk lebih memahami perbedaannya.

Kita tahu bahwa dengan, misalnya, variabel JavaScript ( var ), ruang lingkup terbatas pada fungsi.

Kami memiliki situasi yang sama dengan let dan const , tetapi mereka adalah variabel lokal lingkup blok.

closure dalam JavaScript adalah fungsi yang memiliki akses ke variabel fungsi luar (penutup) — rantai lingkup. Penutupan memiliki tiga rantai cakupan, dan memiliki akses ke berikut ini:

• cakupannya sendiri (yaitu variabel yang didefinisikan di antara kurung kurawalnya),
• variabel fungsi luar,
• variabel globalnya.

Cerita dengan preprocessors serupa. Mari kita gunakan Sass sebagai contoh karena mungkin ini adalah preprosesor paling populer saat ini.

Dengan Sass, kami memiliki dua jenis variabel: lokal dan global.

Variabel global dapat dideklarasikan di luar pemilih atau konstruksi apa pun (misalnya, sebagai mixin). Jika tidak, variabel akan menjadi lokal.

Setiap blok kode bersarang dapat mengakses variabel terlampir (seperti dalam JavaScript).

Ini berarti bahwa, di Sass, cakupan variabel sepenuhnya bergantung pada struktur kode.

Namun, properti kustom CSS diwarisi secara default, dan seperti properti CSS lainnya, properti tersebut berjenjang.

Anda juga tidak dapat memiliki variabel global yang mendeklarasikan properti khusus di luar pemilih — itu bukan CSS yang valid. Cakupan global untuk properti kustom CSS sebenarnya adalah :root scope, dimana properti tersedia secara global.

Mari kita gunakan pengetahuan sintaks dan mengadaptasi contoh Sass ke HTML dan CSS. Kami akan membuat demo menggunakan properti kustom CSS asli. Pertama, HTML-nya:

 global <div class="enclosing"> enclosing <div class="closure"> closure </div> </div>

Dan ini CSSnya:

 :root { --globalVar: 10px; } .enclosing { --enclosingVar: 20px; } .enclosing .closure { --closureVar: 30px; font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar)); /* 60px for now */ } 

Perubahan pada Properti Kustom Segera Diterapkan ke Semua Instance

Sejauh ini, kita belum melihat perbedaannya dengan variabel Sass. Namun, mari kita menetapkan kembali variabel setelah penggunaannya:

Dalam kasus Sass, ini tidak berpengaruh:

 .closure { $closureVar: 30px; // local variable font-size: $closureVar +$enclosingVar+ $globalVar; // 60px, $closureVar: 30px is used $closureVar: 50px; // local variable } 

Namun di CSS, nilai yang dihitung diubah, karena nilai font-size dihitung ulang dari nilai –closureVar yang diubah:

 .enclosing .closure { --closureVar: 30px; font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar)); /* 80px for now, --closureVar: 50px is used */ --closureVar: 50px; } 

Itulah perbedaan besar pertama: Jika Anda menetapkan kembali nilai properti kustom, browser akan menghitung ulang semua variabel dan ekspresi calc() di mana itu diterapkan.

Praprosesor Tidak Mengetahui Struktur DOM

Misalkan kita ingin menggunakan font-size default untuk blok, kecuali jika kelas yang highlighted ada.

Berikut HTML-nya:

 <div class="default"> default </div> <div class="default highlighted"> default highlighted </div>

Mari kita lakukan ini menggunakan properti kustom CSS:

 .highlighted { --highlighted-size: 30px; } .default { --default-size: 10px; /* Use default-size, except when highlighted-size is provided. */ font-size: var(--highlighted-size, var(--default-size)); }

Karena elemen HTML kedua dengan kelas default membawa kelas yang highlighted , properti dari kelas yang highlighted akan diterapkan ke elemen itu.

Dalam hal ini, artinya –highlighted-size: 30px; akan diterapkan, yang pada gilirannya akan membuat properti font-size yang ditugaskan menggunakan –highlighted-size .

Semuanya mudah dan berfungsi:

Sekarang, mari kita coba mencapai hal yang sama menggunakan Sass:

 .highlighted { $highlighted-size: 30px; } .default { $default-size: 10px; /* Use default-size, except when highlighted-size is provided. */ @if variable-exists(highlighted-size) { font-size: $highlighted-size; } @else { font-size: $default-size; } }

Hasilnya menunjukkan bahwa ukuran default diterapkan pada keduanya:

Ini terjadi karena semua perhitungan dan pemrosesan Sass terjadi pada waktu kompilasi, dan tentu saja, Sass tidak tahu apa-apa tentang struktur DOM, bergantung sepenuhnya pada struktur kode.

Seperti yang Anda lihat, properti kustom memiliki keunggulan pelingkupan variabel dan menambahkan kaskade properti CSS yang biasa, menyadari struktur DOM dan mengikuti aturan yang sama seperti properti CSS lainnya.

Kesimpulan kedua adalah bahwa properti khusus CSS menyadari struktur DOM dan bersifat dinamis .

Kata Kunci CSS-Lebar Dan all Properti

Properti kustom CSS tunduk pada aturan yang sama seperti properti kustom CSS biasa. Ini berarti Anda dapat menetapkan salah satu kata kunci CSS umum untuk mereka:

• inherit
  Kata kunci CSS ini menerapkan nilai induk elemen.
• initial
  Ini menerapkan nilai awal seperti yang didefinisikan dalam spesifikasi CSS (nilai kosong, atau tidak sama sekali dalam beberapa kasus properti kustom CSS).
• unset
  Ini menerapkan nilai warisan jika properti biasanya diwariskan (seperti dalam kasus properti kustom) atau nilai awal jika properti biasanya tidak diwariskan.
• revert
  Ini mengatur ulang properti ke nilai default yang ditetapkan oleh lembar gaya agen pengguna (nilai kosong dalam kasus properti kustom CSS).

Berikut ini contohnya:

 .common-values{ --border: inherit; --bgcolor: initial; --padding: unset; --animation: revert; }

Mari kita pertimbangkan kasus lain. Misalkan Anda ingin membangun sebuah komponen dan ingin memastikan bahwa tidak ada gaya lain atau properti khusus yang diterapkan padanya secara tidak sengaja (solusi CSS modular biasanya akan digunakan untuk gaya dalam kasus seperti itu).

Tapi sekarang ada cara lain: menggunakan all properti CSS. Singkatan ini mengatur ulang semua properti CSS.

Bersama dengan kata kunci CSS, kita dapat melakukan hal berikut:

 .my-wonderful-clean-component{ all: initial; }

Ini mengatur ulang semua gaya untuk komponen kami.

Sayangnya, all kata kunci tidak menyetel ulang properti khusus. Ada diskusi yang sedang berlangsung tentang apakah akan menambahkan awalan -​- , yang akan mengatur ulang semua properti kustom CSS.

Jadi, di masa depan, reset penuh mungkin dilakukan seperti ini:

 .my-wonderful-clean-component{ --: initial; /* reset all CSS custom properties */ all: initial; /* reset all other CSS styles */ }

Kasus Penggunaan Properti Kustom CSS

Ada banyak kegunaan dari properti kustom. Saya akan menunjukkan yang paling menarik dari mereka.

Meniru Aturan CSS yang Tidak Ada

Nama variabel CSS ini adalah "properti khusus", jadi mengapa tidak menggunakannya untuk meniru properti yang tidak ada?

Ada banyak dari mereka: translateX/Y/Z , background-repeat-x/y (masih tidak kompatibel dengan lintas-browser), box-shadow-color .

Mari kita coba membuat yang terakhir berhasil. Dalam contoh kita, mari ubah warna bayangan kotak saat melayang. Kami hanya ingin mengikuti aturan KERING (jangan ulangi sendiri), jadi alih-alih mengulangi seluruh nilai box-shadow di bagian :hover , kami hanya akan mengubah warnanya. Properti khusus untuk menyelamatkan:

 .test { --box-shadow-color: yellow; box-shadow: 0 0 30px var(--box-shadow-color); } .test:hover { --box-shadow-color: orange; /* Instead of: box-shadow: 0 0 30px orange; */ } 

Tema Warna

Salah satu kasus penggunaan yang paling umum dari properti kustom adalah untuk tema warna dalam aplikasi. Properti khusus dibuat untuk memecahkan masalah seperti ini saja. Jadi, mari berikan tema warna sederhana untuk sebuah komponen (langkah yang sama dapat diikuti untuk aplikasi).

Berikut adalah kode untuk komponen tombol kami:

 .btn { background-image: linear-gradient(to bottom, #3498db, #2980b9); text-shadow: 1px 1px 3px #777; box-shadow: 0px 1px 3px #777; border-radius: 28px; color: #ffffff; padding: 10px 20px 10px 20px; }

Mari kita asumsikan kita ingin membalikkan tema warna.

Langkah pertama adalah memperluas semua variabel warna ke properti kustom CSS dan menulis ulang komponen kita. Jadi, hasilnya akan sama:

 .btn { --shadow-color: #777; --gradient-from-color: #3498db; --gradient-to-color: #2980b9; --color: #ffffff; background-image: linear-gradient( to bottom, var(--gradient-from-color), var(--gradient-to-color) ); text-shadow: 1px 1px 3px var(--shadow-color); box-shadow: 0px 1px 3px var(--shadow-color); border-radius: 28px; color: var(--color); padding: 10px 20px 10px 20px; }

Ini memiliki semua yang kita butuhkan. Dengannya, kita dapat mengganti variabel warna ke nilai terbalik dan menerapkannya saat diperlukan. Kita dapat, misalnya, menambahkan kelas HTML inverted global (ke, katakanlah, elemen body ) dan mengubah warna saat diterapkan:

 body.inverted .btn{ --shadow-color: #888888; --gradient-from-color: #CB6724; --gradient-to-color: #D67F46; --color: #000000; }

Di bawah ini adalah demo di mana Anda dapat mengklik tombol untuk menambah dan menghapus kelas global:

Perilaku ini tidak dapat dicapai dalam praprosesor CSS tanpa biaya penggandaan kode. Dengan praprosesor, Anda akan selalu perlu mengganti nilai dan aturan aktual, yang selalu menghasilkan CSS tambahan.

Dengan properti kustom CSS, solusinya sebersih mungkin, dan penyalinan dan penempelan dihindari, karena hanya nilai variabel yang didefinisikan ulang.

Menggunakan Properti Kustom Dengan JavaScript

Sebelumnya, untuk mengirim data dari CSS ke JavaScript, kita sering harus menggunakan trik, menulis nilai CSS melalui JSON biasa di keluaran CSS dan kemudian membacanya dari JavaScript.

Sekarang, kita dapat dengan mudah berinteraksi dengan variabel CSS dari JavaScript, membaca dan menulisnya menggunakan metode .getPropertyValue() dan .setProperty() yang terkenal, yang digunakan untuk properti CSS biasa:

 /** * Gives a CSS custom property value applied at the element * element {Element} * varName {String} without '--' * * For example: * readCssVar(document.querySelector('.box'), 'color'); */ function readCssVar(element, varName){ const elementStyles = getComputedStyle(element); return elementStyles.getPropertyValue(`--${varName}`).trim(); } /** * Writes a CSS custom property value at the element * element {Element} * varName {String} without '--' * * For example: * readCssVar(document.querySelector('.box'), 'color', 'white'); */ function writeCssVar(element, varName, value){ return element.style.setProperty(`--${varName}`, value); }

Mari kita asumsikan kita memiliki daftar nilai media-query:

 .breakpoints-data { --phone: 480px; --tablet: 800px; }

Karena kita hanya ingin menggunakannya kembali dalam JavaScript — misalnya, di Window.matchMedia() — kita dapat dengan mudah mendapatkannya dari CSS:

 const breakpointsData = document.querySelector('.breakpoints-data'); // GET const phoneBreakpoint = getComputedStyle(breakpointsData) .getPropertyValue('--phone');

Untuk menunjukkan cara menetapkan properti khusus dari JavaScript, saya telah membuat demo kubus CSS 3D interaktif yang merespons tindakan pengguna.

Ini tidak terlalu sulit. Kita hanya perlu menambahkan latar belakang sederhana, lalu menempatkan lima wajah kubus dengan nilai yang relevan untuk properti transform : translateZ() , translateY() , rotateX() dan rotateY() .

Untuk memberikan perspektif yang tepat, saya menambahkan yang berikut ini ke pembungkus halaman:

 #world{ --translateZ:0; --rotateX:65; --rotateY:0; transform-style:preserve-3d; transform: translateZ(calc(var(--translateZ) * 1px)) rotateX(calc(var(--rotateX) * 1deg)) rotateY(calc(var(--rotateY) * 1deg)); }

Satu-satunya hal yang hilang adalah interaktivitas. Demo harus mengubah sudut pandang X dan Y ( –rotateX dan –rotateY ) saat mouse bergerak dan harus memperbesar dan memperkecil saat mouse bergulir ( –translateZ ).

Inilah JavaScript yang melakukan triknya:

 // Events onMouseMove(e) { this.worldXAngle = (.5 - (e.clientY / window.innerHeight)) * 180; this.worldYAngle = -(.5 - (e.clientX / window.innerWidth)) * 180; this.updateView(); }; onMouseWheel(e) { /*…*/ this.worldZ += delta * 5; this.updateView(); }; // JavaScript -> CSS updateView() { this.worldEl.style.setProperty('--translateZ', this.worldZ); this.worldEl.style.setProperty('--rotateX', this.worldXAngle); this.worldEl.style.setProperty('--rotateY', this.worldYAngle); };

Sekarang, ketika pengguna menggerakkan mouse mereka, demo mengubah tampilan. Anda dapat memeriksa ini dengan menggerakkan mouse Anda dan menggunakan roda mouse untuk memperbesar dan memperkecil:

Pada dasarnya, kami baru saja mengubah nilai properti kustom CSS. Segala sesuatu yang lain (memutar dan memperbesar dan memperkecil) dilakukan oleh CSS.

Tip: Salah satu cara termudah untuk men-debug nilai properti kustom CSS adalah dengan menampilkan kontennya dalam konten yang dihasilkan CSS (yang berfungsi dalam kasus sederhana, seperti dengan string), sehingga browser akan secara otomatis menampilkan nilai yang diterapkan saat ini:

 body:after { content: '--screen-category : 'var(--screen-category); }

Anda dapat memeriksanya di demo CSS biasa (tanpa HTML atau JavaScript). (Ubah ukuran jendela untuk melihat browser mencerminkan nilai properti kustom CSS yang diubah secara otomatis.)

Dukungan Peramban

Properti kustom CSS didukung di semua browser utama:

Artinya, Anda dapat mulai menggunakannya secara native.

Jika Anda perlu mendukung browser lama, Anda dapat mempelajari sintaks dan contoh penggunaan serta mempertimbangkan kemungkinan cara untuk beralih atau menggunakan CSS dan variabel praprosesor secara paralel.

Tentu saja, kita harus mampu mendeteksi dukungan di CSS dan JavaScript untuk memberikan fallback atau penyempurnaan.

Ini cukup mudah. Untuk CSS, Anda dapat menggunakan kondisi @supports dengan kueri fitur dummy:

 @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ }

Dalam JavaScript, Anda dapat menggunakan properti kustom dummy yang sama dengan metode statis CSS.supports() :

 const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ }

Seperti yang kita lihat, properti kustom CSS masih belum tersedia di setiap browser. Mengetahui hal ini, Anda dapat secara bertahap meningkatkan aplikasi Anda dengan memeriksa apakah mereka didukung.

Misalnya, Anda dapat membuat dua file CSS utama: satu dengan properti kustom CSS dan yang kedua tanpa mereka, di mana properti tersebut dibariskan (kita akan membahas cara melakukannya segera).

Muat yang kedua secara default. Kemudian, cukup lakukan pemeriksaan di JavaScript dan alihkan ke versi yang disempurnakan jika properti khusus didukung:

 <!-- HTML --> <link href="without-css-custom-properties.css" rel="stylesheet" type="text/css" media="all" />

 // JavaScript if(isSupported){ removeCss('without-css-custom-properties.css'); loadCss('css-custom-properties.css'); // + conditionally apply some application enhancements // using the custom properties }

Ini hanya sebuah contoh. Seperti yang akan Anda lihat di bawah, ada opsi yang lebih baik.

Cara Mulai Menggunakannya

Menurut survei baru-baru ini, Sass terus menjadi preprocessor pilihan untuk komunitas pengembangan.

Jadi, mari pertimbangkan cara untuk mulai menggunakan properti kustom CSS atau mempersiapkannya menggunakan Sass.

Kami memiliki beberapa pilihan.

1. Periksa Secara Manual di Kode untuk Dukungan

Salah satu keuntungan dari metode pemeriksaan kode secara manual apakah properti kustom didukung adalah metode ini berfungsi dan kami dapat melakukannya sekarang (jangan lupa bahwa kami telah beralih ke Sass):

 $color: red; :root { --color: red; } .box { @supports ( (--a: 0)) { color: var(--color); } @supports ( not (--a: 0)) { color: $color; } }

Metode ini memang memiliki banyak kekurangan, salah satunya adalah kode menjadi rumit, dan menyalin dan menempel menjadi cukup sulit untuk dipertahankan.

2. Gunakan Plugin yang Secara Otomatis Memproses CSS yang Dihasilkan

Ekosistem PostCSS menyediakan lusinan plugin hari ini. Beberapa dari mereka memproses properti kustom (nilai sebaris) dalam output CSS yang dihasilkan dan membuatnya berfungsi, dengan asumsi Anda hanya menyediakan variabel global (yaitu Anda hanya mendeklarasikan atau mengubah properti kustom CSS di dalam :root selector(s)), jadi nilainya dapat dengan mudah digariskan.

Contohnya adalah postcss-custom-properties.

Plugin ini menawarkan beberapa kelebihan: Itu membuat sintaks berfungsi; itu kompatibel dengan semua infrastruktur PostCSS; dan tidak memerlukan banyak konfigurasi.

Ada kontra, namun. Plugin mengharuskan Anda untuk menggunakan properti kustom CSS, sehingga Anda tidak memiliki jalur untuk mempersiapkan proyek Anda untuk beralih dari variabel Sass. Juga, Anda tidak akan memiliki banyak kendali atas transformasi, karena itu dilakukan setelah Sass dikompilasi ke CSS. Terakhir, plugin tidak memberikan banyak informasi debug.

3. Campuran css-vars

Saya mulai menggunakan properti khusus CSS di sebagian besar proyek saya dan telah mencoba banyak strategi:

• Beralih dari Sass ke PostCSS dengan cssnext.
• Beralih dari variabel Sass ke properti kustom CSS murni.
• Gunakan variabel CSS di Sass untuk mendeteksi apakah mereka didukung.

Sebagai hasil dari pengalaman itu, saya mulai mencari solusi yang akan memenuhi kriteria saya:

• Seharusnya mudah untuk mulai menggunakan Sass.
• Ini harus mudah digunakan, dan sintaksnya harus sedekat mungkin dengan properti kustom CSS asli.
• Mengalihkan keluaran CSS dari nilai sebaris ke variabel CSS seharusnya mudah.
• Anggota tim yang terbiasa dengan properti kustom CSS akan dapat menggunakan solusi tersebut.
• Harus ada cara untuk memiliki informasi debug tentang kasus tepi dalam penggunaan variabel.

Hasilnya, saya membuat css-vars, campuran Sass yang dapat Anda temukan di Github. Dengan menggunakannya, Anda dapat mulai menggunakan sintaks properti kustom CSS.

Menggunakan css-vars Mixin

Untuk mendeklarasikan variabel, gunakan mixin sebagai berikut:

 $white-color: #fff; $base-font-size: 10px; @include css-vars(( --main-color: #000, --main-bg: $white-color, --main-font-size: 1.5*$base-font-size, --padding-top: calc(2vh + 20px) ));

Untuk menggunakan variabel ini, gunakan fungsi var() :

 body { color: var(--main-color); background: var(--main-bg, #f00); font-size: var(--main-font-size); padding: var(--padding-top) 0 10px; }

Ini memberi Anda cara untuk mengontrol semua keluaran CSS dari satu tempat (dari Sass) dan mulai mengenal sintaksnya. Plus, Anda dapat menggunakan kembali variabel dan logika Sass dengan mixin.

Ketika semua browser yang ingin Anda dukung bekerja dengan variabel CSS, maka yang harus Anda lakukan hanyalah menambahkan ini:

 $css-vars-use-native: true;

Alih-alih menyelaraskan properti variabel dalam CSS yang dihasilkan, mixin akan mulai mendaftarkan properti kustom, dan instance var() akan menuju ke CSS yang dihasilkan tanpa transformasi apa pun. Ini berarti Anda akan sepenuhnya beralih ke properti kustom CSS dan akan memiliki semua keuntungan yang telah kita bahas.

Jika Anda ingin mengaktifkan informasi debug yang berguna, tambahkan yang berikut ini:

 $css-vars-debug-log: true;

Ini akan memberi Anda:

• log ketika variabel tidak ditetapkan tetapi digunakan;
• log ketika variabel dipindahkan;
• informasi ketika variabel tidak didefinisikan tetapi nilai default diteruskan yang digunakan sebagai gantinya.

Kesimpulan

Sekarang Anda tahu lebih banyak tentang properti kustom CSS, termasuk sintaksnya, kelebihannya, contoh penggunaan yang baik, dan cara berinteraksi dengannya dari JavaScript.

Anda telah mempelajari cara mendeteksi apakah variabel tersebut didukung, perbedaannya dengan variabel praprosesor CSS, dan cara mulai menggunakan variabel CSS asli hingga didukung di seluruh browser.

Ini adalah waktu yang tepat untuk mulai menggunakan properti kustom CSS dan mempersiapkan dukungan asli mereka di browser.