CSS Variables pada Oxygen Builder untuk mempercepat website atau situs Anda. Kelebihan yang ditawarkan CSS Variables ini cukup banyak. Selain dapat mempercepat website. Juga dapat mempermudah dalam merubah warna secara global dan jauh lebih mudah untuk diingat.

Semakin besar situs Anda semakin banyak kode Anda pula. CSS Variables cocok digunakan pada situs yang besar untuk lebih mudah dalam membaca kode dan mempermudah developer untuk merubah warna, ukuran dan unit lainnya secara global. Dan juga Anda akan dengan mudah jika ada typo atau kesalahan dalam penulisan dalam CSS akan mudah terlihat.

Tabel Konten sembunyikan

1 CSS Variables

2 CSS Variables Warna

3 CSS Variables Ukuran

4 Mengkombinasikan Calc() dengan CSS Variable

5 Menerapkan CSS Variables Pada Oxygen Builder

6 Memasukkan CSS Variables pada Oxygen Builder

Pada umumnya, ketika kita ingin menampilkan sebuah div dengan warna yang berbeda maka Anda perlu menuliskan seperti ini pada CSS Anda:

.div-ungu,.div-biru-tua{
 font-size:20px;
 padding:40px;
 }

 .div-ungu{
 background:#7E03FF;
 color:#fff;
 }

 .div-biru-tua{
 background:#0310FF;
 color:#fff;
 }

Klik Disini Untuk Melihat di Codepen

CSS Variables

Secara tradisional atau konvensional biasanya memasukkan CSS properties beserta value seperti: background: #7E03FF; Begitu pula, pada div yang lain Anda harus memasukkan CSS properties yang sama dan value yang berbeda. Contohnya pada div kedua background: #0310FF;

Bayangkan, jika Anda membangun sebuah situs/website yang kompleks yang memiliki berbagai macam CSS Properties dan Value.

CSS Variables memudahkan Anda dalam melakukan coding sehingga mudah dibaca. Dan mudah diingat, setelah beberapa percobaan dengan adanya CSS Variables ini meningkatkan kecepatan pada situs Anda.

:root{
 --ungu:#7E03FF;
 --biru:#0310FF;
 --putih:#fff;
 --padding:40px;
 --font:20px;
 }

 .div-ungu,.div-biru-tua{
  font-size:var(--font);
  padding:var(--padding);
  }

 .div-ungu{
  background:var(--ungu);
  color:var(--putih);
  }

 .div-biru-tua{
  background:var(--biru);
  color:var(--putih);
  }

Klik Disini untuk melihatnya kedalam Codepen

Ada perbedaan antara CSS properties dan valuenya.Sebelumnya background: #7E03FF; menjadi background: var(--ungu);

Cukup mudah dibaca bukan? Sebelum mengimplementasikan CSS Variable masukkan :root di dalam stylesheet Anda. dan Masukkan value yang Anda inginkan. Beri nama untuk mempermudah dalam pembangunan situs Anda.

CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 1 — Ilustrasi CSS

CSS Variables Warna

Contohnya memasukkan warna ungu

:root{
--ungu:#7E03FF;
}

pada saat melakukan kustomisasi masukkan:

.div-ungu{
  background:var(--ungu);
  }

rubah value warna yang sebelumnya #7E03FF; menjadi var(--ungu)

CSS Variables Ukuran

Memberikan CSS Variables pada value ukuran cukuplah mudah semisal pada :root saya memberikan ukuran seperti dibawah ini:

:root{
 --padding:40px;
 --font:20px;
 }

Terdapat dua CSS Variables dalam bentuk ukuran. dan saya beri nama yang berbeda --padding untuk ukuran 40px, dan --font untuk ukuran 20px. Masing-masing memiliki ukuran yang berbeda. Jika Anda ingin memberi padding 40px masukkan:

.div-ungu{
  padding:var(--padding);
  }

Maka padding akan menjadi padding menjadi padding:40px;

Mengkombinasikan Calc() dengan CSS Variable

Selain ukuran dan warna Anda juga bisa memasukkan calc() CSS pada situs Anda dan mengkombinasikannya. Saya biasa menggunakan calc() untuk ukuran font dan ukuran div. Sebagai contohnya saya akan menerapkan pada ukuran Heading.

:root{
--size:calc(33px + (55 - 33) * ((100vw - 360px) / (1900 - 360)));
}

Sebagai contohnya, menggunakan --sizeuntuk memunculkan ukuran calc pada heading berikut implementasinya:

h1{
 font-size:var(--size);
}

Jika Anda ingin mempelajari tentang calc() Anda bisa mengunjungi 2 EASY WAYS TO IMPLEMENT FLUID TYPOGRAPHY

Menerapkan CSS Variables Pada Oxygen Builder

Bagaimana cara menerapkan CSS Variables? Sebelumnya kita harus mengetahui struktur dalam Oxygen Builder terlebih dahulu. Ada berbagai macam cara untuk memasukkan CSS di dalam Oxygen Builder.

Yang terpenting adalah memasukkan :root pada stylesheet global. Atau Anda bisa menggunakan plugin seperti Advanced Script untuk situs Anda.

Memasukkan pada stylesheet global berfungsi untuk menampilkan CSS secara global. :root adalah salah satu pseudo-class yang merepresentasikan dokumen HTML.

Memasukkan CSS Variables pada Oxygen Builder

Buka halaman situs Anda klik klik edit with oxygen
Tunggu sampai editor terbuka
Kemudian klik manage

Tambahkan stylesheet

Add Stylesheet CSS Variable pada Oxygen — CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 8

Kemudian berikan nama pada Stylesheet Anda.
Klik Stylesheet yang sudah Anda buat.

Memasukkan CSS Variable — CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 9

Setelah memasukkan CSS Variables pada Stylesheet. Implementasikan kode yang ingin Anda masukkan. Saya akan memasukkan warna pada salah satu button.
Pilih salah satu button kemudian masukkan warna pada background.

Memasukkan CSS Variables pada Oxygen — CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 10

Selanjutnya memasukkan ukuran pada font. Memasukkan CSS Variables pada ukuran font pada Oxygen Builder cukup berbeda
Klik salah satu header

Memasukkan CSS variables pada font di Oxygen Builder — CSS Variables Pada Oxygen Builder Untuk Mempercepat Website 11

Kemudian simpan atau klik Save

Berikut cara menerapkan CSS Variables pada Oxygen Builder. Dan bagaimana cara menggunakannya agar mempercepat situs Anda?

Anda bisa mempelajari pada kelas yang akan kami buka pada bulan ini. Basic Oxygen Crash Course akan hadir segera. Tunggu kehadirannya.

CSS Variables Pada Oxygen Builder Untuk Mempercepat Website