variabel ASS, juga disebut sifat kustom, menentukan nilai yang dapat Anda gunakan kembali dalam aturan ASS lainnya. Anda dapat membuat variabel untuk semua jenis properti ASS.
Untuk membuat variabel ASS, perbaiki namanya dengan double-hyphen (--).
--color-1: red;
Untuk menggunakan nilai variabel ASS dalam aturan ASS lain, gunakan fungsi var() untuk memanggilnya.
var(--color-1);
| Note: |
|---|
Fungsi var() juga menerima nilai default opsional (lihat Menentukan nilai default di bawah). |
Setelah Anda mendefinisikan variabel, Anda dapat menggunakannya dalam banyak properti ASS lainnya seperti yang Anda inginkan. Ketika Anda memperbaruinya, semua properti AS yang menggunakannya juga.
Misalnya, snippet AS berikut mendefinisikan satu aturan gaya yang menyatakan dua variabel warna, dan dua aturan gaya yang menggunakan variabel tersebut.
:root {
--color-1: blue;
--color-2: yellow;
}
.paragraph-regular {
color: var(--color-1);
background: var(--color-2);
padding: 2px;
}
.paragraph-reverse {
color: var(--color-2);
background: var(--color-1);
padding: 2px;
}
Untuk memperbarui skema warna, Anda hanya perlu mengubah dua nilai variabel daripada empat nilai warna.
Variabel memudahkan mengelola gaya untuk UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary kompleks, di mana beberapa aturan, kadang-kadang dalam lembaran gaya yang berbeda, gunakan nilai yang sama.
Fungsi var() menerima nilai default opsional. Sistem UI menggunakan nilai default ketika tidak dapat menyelesaikan variabel. Misalnya, jika Anda menghapus variabel dari lembaran gaya tetapi lupa untuk menghapus referensi ke dalamnya.
Untuk menentukan nilai default untuk variabel, tambahkan setelah nilai variabel, dipisahkan oleh komma ,. Potongan berikut USS memanggil variabel --color-1, tetapi jika sistem UI tidak dapat menyelesaikannya, menggunakan nilai heks untuk merah (#FF0000).
var(--color-1, #FF0000);
Lembar gaya built-in unity menentukan variabel ASS yang menetapkan nilai default untuk antarmuka Editor. Anda dapat menggunakan variabel ini dalam lembaran gaya Anda sendiri untuk memastikan bahwa ekstensi Editor kustom Anda sesuai dengan gaya Unity. Untuk rincian, lihat Variabel Unity bawaan.
Variabel bekerja hampir persis cara yang sama di USS seperti yang mereka lakukan di CSS. Untuk informasi rinci tentang variabel CSS, lihat Dokumentasi MDN.
Beberapa browser web mendukung menggunakan fungsi var() dalam fungsi lain, seperti dalam deklarasi properti di bawah ini:
background-color: rgb(var(--red), 0, 0);
Unity tidak mendukung penggunaan var() ini.
Praktik CSS umum adalah untuk mendeklarasikan variabel “global” di pemilih kelas pseudo-class :root. Karena setiap elemen dalam mesin cuci halaman web dari :root, setiap pemilih dalam lembaran gaya CSS dapat memanggil variabel yang diumumkan di sana.
Dalam Unity, menentukan variabel di :root bekerja untuk jendela Editor dan panel runtime, asalkan Anda melampirkan stylesheet ke elemen visual akar dari panel atau jendela editor. Ini tidak berfungsi untuk UI InspectorJendela Unity yang menampilkan informasi tentang Pengaturan GameObject yang dipilih saat ini, aset atau proyek, memungkinkan Anda untuk memeriksa dan mengedit nilai. More info
Lihat di Glossary.
Dalam Inspektur, kelas pseudo :root hanya aktif pada VisualElement akar jendela Inspektur. Subpohonan Anda melampirkan lembar gaya untuk jauh lebih rendah dalam hierarki Inspektur. Akibatnya, pemilih :root tidak pernah cocok bagian dari sub-pohon.
Anda dapat menggunakan pemilih kelas AS sebagai pengganti pemilih :root dalam Inspektur kustom. Buat kelas AS untuk mendeklarasikan variabel Anda, dan menerapkannya ke elemen tertinggi di hirarki yang memiliki akses.
Sebagai contoh, cuplikan USS berikut mendefinisikan kelas berikut:
.root menyatakan variabel..label1 memanggil variabel..root {
--color1: rgb(25, 255, 75);
}
.label1 {
color: var(--color1);
}
Potongan UXML berikut menciptakan elemen wadah sederhana dan menetapkan kelas akar untuk itu. Wadah memiliki elemen anak, label, dengan kelas label1 yang ditugaskan untuk itu.
Di UXML:
<UXML xmlns="UnityEngine.UIElements">
<VisualElement class="root">
<!-- Including, for example... -->
<Label class="label1" text="Label text"/>
</VisualElement>
</UXML>
Karena inherit Label dari wadah, gayanya dapat memanggil variabel yang didefinisikan dalam gaya kontainer.