CSS 속성 변수로 담아 사용하기

주로 색상값을 변수에 담아 곳곳에 사용하면. 테마 변경시 변수에 담아둔 색상값만 변경하면 한번에 전부 변경된다.

일일이 하나하나 수정할 필요가 없어지고 유지보수가 용이한 코드가 된다는 것!

 

흔한패턴 : :root 의사 클래스에 선언해서 html문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구하는 방법.

범위를 제한해야 하는 적절한 이유가 있을 경우 달리 사용가능.

:root {
  --main-bg-color: brown;
}

아래 처럼 var()함수안에 선언한 이름을 넣어주면 그 값이 불러와 진다.

element {
  background-color: var(--main-bg-color);
}

 

 

 

 

왜 쓰는지 코드비교해보자. 반복사용하는 것을 선언하고 그 값을 뿌려준 코드. 추후에 값 변경시 일일이 찾아 변경하지 않아도 된다.

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

 

 

폴백, 자바스크립트에서 사용자 속성값을 사용하는 코드는 아래링크를 참고하기

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

폴백은 두개 선언을 하고 하나를 브라우저가 인식을 못하면 다른 차선책으로 값이 설정되게 하는 것인데

요 var()값이 속성이랑 안맞으면 폴백은 커녕 아예 뻑-나서 다른 차선책으로 설정한 값도 뻑나 버리고(폴백이 되지않고) 부모속성을 받아오고 그마저도 없으면 브라우저 초기값을 받아온다.라는 의미.