Resep Rahasia CSS Custom Properties
Tags: css
Published: 2022-07-20 03:27:24

---
title: Resep Rahasia CSS Custom Properties
published: true
description: 
tags: CSS
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Sekitar tahun 2017 _CSS Custom Properties_ atau bisa kita sebut _CSS Variable_ mulai diperkenalkan. Saya adalah orang yang skeptis pada waktu itu dan tidak memulai untuk eksplorasi. Karena sudah merasa memiliki variabel di dalam _preprocessor_.

Tapi ternyata cukup banyak manfaat _CSS Variable_ ini dalam developmen. Jadi, variabel dalam _preprocessor_ itu adalah statis, tapi tidak untuk _CSS Variable_. 

## CSS Variable itu Dinamis

Statis yang dimaksud adalah kita tidak bisa mengubah nilai dari variabel dimanapun dan kapanpun. Seperti contoh di bawah perbandingan mendeklarasikan variabel.

Bagaimana variabel dideklarasi dalam SASS
```css
$background: tomato;

.element {
    background: $background;
}
```

Hasil kompilasi
```css
.element {
    background: tomato;
}
```

Bagaimana variabel dideklarasi dalam CSS
```css
:root {
  --background: tomato
}

.element {
  background: var(--background);
}
```

Hasil kompilasi _CSS Variable_ akan tetap sama dengan kode sumbernya. Untuk menggunakan nilai _CSS Variable_ kita menyematkannya dengan menggunakan `var()` dalam properti CSS sebagai nilai. Di bawah akan saya coba tunjukan mengapa _CSS Variable_ itu dinamis.

```css
:root {
  --background: tomato;
}

.element {
  background: var(--background);
}

.use-teal {
  --background: teal;
}
```

```html
<div class="element">Tomato</div>
<div class="element  use-teal">Teal</div>
```

Dari contoh di atas maka `.element` akan memiliki _background_ tomato dan `.element  .use-teal` akan memiliki _background_ teal. Jadi kita bisa mengubah nilai variabel dimanapun dan kapanpun.

Kita akan coba lanjut dengan beberapa cara menyematkan nilai variabel.

```css
:root {
  --background: tomato;
}

.element {
  background: var(--background);
}
```

```html
<div class="element">Tomato</div>
<div class="element" style="--background: teal">Teal</div>
```

Dengan melihat cara saya menyematkan nilai variabel di atas. Berarti cara menyematkan sebuah nilai tidak hanya didominasi dengan mengubahnya dalam berkas CSS saja. Tetapi kita juga bisa mengubahnya melalui atribut HTML.

### Mengubah Nilai Melalui JS

Kita pun bisa mengubah nilai variabel dengan menggunakan JS. Berikut adalah contoh penerapan bagaimana nilai sebuah variabel diubah melalui _event_ JS. 

```css
:root {
  --background: tomato;
}

.element {
  background: var(--background);
}
```

```html
<div class="element">Hanya sebuah teks</div>
<button onclick="changeColor()">Ubah warna</button>
```

```javascript
const changeColor = () => {
  const randomColor = Math.floor(Math.random()*16777215).toString(16);
  const el = document.querySelector('.element');
  el.style.setProperty('--background', '#' + randomColor);
}
```

## Bersinergi dengan CSS Preprocessor

Dengan adanya variabel dalam CSS bukan berarti variabel yang telah dulu ada yang digunakan oleh preprocessor jadi kita tinggalkan. Kita masih dapat memanfaatkannya untuk nilai-nilai yang sifatnya statis.

Mencampur kedua jenis variabel tersebut masih sangat mungkin kita lakukan. Seperti contoh di bawah.

```sass
$button-sml = 1em;
$button-mid = 1.5em;

.btn {
  --button-size: #{$button-sml);

  font-size: var(--button-size);
}

@media screen and (min-width: 600px) {
  .btn {
    --button-size: #{$button-mid};
  }
}
```

## Keterbatasan

Sebuah fitur selain ada kelebihan tentunya juga memiliki keterbatasan. Beberapa sintaks yang tidak dapat digunakan dengan _CSS Variable_.

```css
:root{
  --min-width: 576px;
  --child-number: 3;
}

@media screen and (min-width: var(--min-width) ) {
  li:nth-child(var(--child-number)) {
    border-bottom: solid 2px teal;
  }
}
```