CSS 변수: 그것들은 무엇이고 그것들을 어떻게 사용하는가

반응형

소행성이란 무엇일까요?

CSS 사용자 지정 속성 일명 CSS 변수를 사용하면 반복해서 사용할 수 있는 변수에 속성을 정의할 수 있습니다. 브랜드 또는 특정 테마에 동일한 색상을 사용하는 경우가 많습니다. 일반적으로 사용되는 속성에 변수를 사용할 때의 큰 이점은 변수를 더 아래로 변경해야 하는 경우 변수를 변경할 수 있다는 것입니다. 이렇게 하면 해당 속성을 사용한 코드의 모든 부분을 찾을 필요가 없습니다.

사용 방법

요소에 변수 적용

 

먼저 어떤 요소에 적용해야 하는지 선언해야 합니다. 모든 요소에 적용할 수 있지만 CSS(글로벌 범위)의 모든 위치에서 사용할 수 있도록 루트 요소에 적용하는 것이 일반적입니다. :element {} 구문을 사용하여 요소를 선택하십시오. 변수의 이름은 원하는 대로 선택할 수 있지만 변수는 대소문자를 구분합니다.

:root {
    --bg-color: #4B6CDB;
    --text-color: #fff;
}

변수 호출

var()를 사용하여 변수를 호출할 수 있습니다. 속성 이름을 입력하는 대신 var 함수 내부의 변수 이름을 호출합니다.

.myClass {
    background-color: var(--bg-color)
    color: var(--text-color)
}