Resep Rahasia CSS 사용자 정의 속성

Sekitar tahun 2017 CSS Customm 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 punya variabel di dalam 전처리기.

Tapi ternyata cukup banyak manfaat CSS Variable ini dalam developmentmen. 전처리기 변수는 CSS 변수에 따라 달라집니다.

CSS 변수 itu 디나미스

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

$background: tomato;

.element {
    background: $background;
}

하실 컴필라시

.element {
    background: tomato;
}

Bagaimana variabel dideklarasi dalam CSS

:root {
  --background: tomato
}

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

여러 가지 조합으로 CSS 변수를 사용할 수 있습니다. 변경 가능한 CSS 변수는 변경되지 않는 항목var() CSS 속성을 변경하는 것입니다. Di bawah akan saya coba tunjukan mengapa CSS Variable itu dinamis.

:root {
  --background: tomato;
}

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

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

<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 청록색. Jadi kita bisa mengubah nilai variabel dimanapun dan kapanpun.

Kita akan coba lanjut dengan beberapa cara menyematkan nilai variabel.

:root {
  --background: tomato;
}

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

<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 속성 HTML.

멩구바 닐라이 멜라루이 JS

JS. Berikut adalah contoh penerapan bagaimana nilai sebuah variabel diubah melalui 이벤트 JS.

:root {
  --background: tomato;
}

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

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

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

CSS 프리프로세서에 대한 추가 정보

전처리기 jadi kita tinggalkan에 대해 CSS의 변화량을 변경하는 방법은 다음과 같습니다. Kita masih dapat memanfaatkannya untuk nilai-nilai yang sifatnya statis.

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

$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};
  }
}

케테르바타산

Sebuah fitur selain ada kelebihan tentunya juga memiliki keterbatasan. 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;
  }
}