css 변수 기본 사용법

css 변수란?

css의 중복되는 값들을 미리 정의해서 여러곳에 사용할 수 있도록 한 것을 css변수라고 합니다.

 

css 변수 기본 사용법

• 변수 앞에 -- 이중 하이픈을 추가해서 변수를 선언합니다.
• 변수는 대소문자를 구별합니다.
• :root - 가상선택자 :root를 이용하면 html문서 전체에 정의되는 전역변수를 만들 수 있습니다.
• 특정 element 를 사용하여 해당 element에만 변수값을 지정해 줄 수도 있습니다.
• 지정한 변수를 사용할때는 var(변수명) 형식으로 사용합니다.

 

.contents {
  border: 2px solid #555;
}

.contents-tit {
  color: #555;
}

.contents-tit::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #555;
}

위에 코드를 보면 #555처럼 중복되는 값이 보입니다.

 

css변수를 사용하면 아래와 같이 나타낼 수 있습니다.

:root {
    --primary-color: #555;
  }
  
  .contents {
    border: 2px solid var(--primary-color);
  }
  
  .contents-tit {
    color: var(--primary-color);
  }
  
  .contents-tit::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
  }

:root 영역에 --primary-color 변수를 정의했기 때문에 전역변수라서 문서 전체에 영향을 미칩니다.

 

범위를 지정해서 같은 변수지만 특정 element 내에서는 다른 값을 가지도록 할 수 있습니다.

 

:root {
    --primary-color: #555;
  }
  
  .contents {
    border: 2px solid var(--primary-color);
  }
  
  .contents-tit {
    --primary-color: #ffff00;
    color: var(--primary-color);
  }

위와 같이 나타내면 같은 --primary-color를 사용해도 전역변수와 .contents-tit는 다른 색상을 나타내게 됩니다.