CSS 에서 변수 다이나믹하게 변경하기 : 클래스 갈아끼우기

 

CSS 에서는 -- 를 앞에 붙임으로써 변수를 선언할수있다.

또한 CSS 변수는 다른 클래스안에서 재설정할수있다.

 .rect {

    --bg-color : black;

    background: var(--bg-color);

  }

  .red    { --bg-color : red; }
  .blue   { --bg-color : blue; }
  .green  { --bg-color : green; } 
  .purple { --bg-color : purple;}

위와 같이 작성하면, JS 에서 inline-style 을 접근하여 귀찮게 변경하지않고,

그저 클래스를 갈아끼움으로써 해당 변수가 다르게 적용되게끔 할수있다.

이 변수는 linear-gradient 같은 CSS 함수의 내부 인자로 전달될수있다.

JS 에서 지지고볶지말고 클래스를 갈아끼우자!