CSS 변수 및 사용 방법

많은 사람들이 CSS 변수에 대해 모르고 있으며, 여러분도 그 중 하나일 수 있습니다! CSS 변수와 사용 방법에 대해 알아볼 시간입니다.

CSS 변수는 특정 요소에 대해 사용자 정의 속성으로 선언됩니다. 그런 다음 해당 요소를 사용하는 모든 위치에서 해당 사용자 정의 속성을 사용할 수 있습니다.

선언 및 사용

사용자 정의 속성을 선언하는 방법은 다음과 같습니다.

element { 
    --background-color: #f00;
}

여기서 element는 div, p, .test 등과 같은 모든 요소의 선택기가 될 수 있습니다.

우리가 한 것은 --background-color 라는 이 요소에 대한 사용자 정의 속성을 선언한 것입니다. 모든 CSS 사용자 정의 속성은 -- 로 시작해야 합니다.

이제 element 함수를 사용하여 var 내부에서 이 사용자 정의 속성을 사용할 수 있습니다.

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

여기서 앞서 선언한 변수에 element의 background-color 속성을 할당했습니다.

이것은 훌륭하지만 일반적으로 하나가 아닌 다른 요소 내에서 반복됩니다. 하나의 요소 유형 내에서 사용자 정의 변수를 선언하는 것은 그리 편리하지 않습니다.

둘 이상의 요소 유형 내에서 사용자 정의 속성을 사용하기 위해 :root 의사 클래스 내에서 사용자 정의 속성을 선언할 수 있습니다.

:root {  
    --primary-color: #333;
}

이제 문서의 모든 요소 내에서 변수--primary-color를 사용할 수 있습니다.

div {  
    color: var(--primary-color);
}
p {  
    background-color: var(--primary-color);
}
.fancy {  
    border-color: var(--primary-color);
}

:root 내부에서 사용자 정의 속성을 선언함으로써 이제 div 내부에서 이를 사용하여 텍스트 색상을 설정하고, p를 배경 색상으로 설정하고, 클래스 fancy가 있는 모든 요소를 ​​사용하여 테두리 색상을 설정할 수 있습니다. 이런 식으로 반복을 최소화했을 뿐만 아니라 주어진 시점에서 웹사이트의 기본 색상을 더 쉽게 편집하고 변경할 수 있도록 했습니다.

계승

요소는 사용자 정의 속성을 상속할 수도 있습니다. 예를 들어 다음 HTML이 있다고 가정해 보겠습니다.

<div class="parent">
    <div class="first-child"></div>  
    <div class="second-child"><div>
</div>

그런 다음 --text-size에 .parent라는 변수를 선언합니다.

.parent {  
    --text-size: 15px;
}

이제 .parent 내부뿐만 아니라 자식 내부에서도 --text-size 를 사용할 수 있습니다.

.first-child {
 font-size: var(--text-size);
}

사용자 정의 속성을 재정의할 수도 있습니다. 자식 요소 내에서 사용자 정의 속성을 다시 선언하여 이를 수행할 수 있습니다.

.second-child {  
    --text-size: 30px;
}

이제 --text-size inside .second-child 를 사용하면 30px로 평가되지만 .first-child 또는 .parent 내부에서 사용하면 여전히 15px입니다.

대체 값

두 번째 매개변수를 var에 전달하여 변수에 대한 대체 값을 정의할 수도 있습니다. 예를 들어:

.second-child {  
    font-size: var(--text-size, 30px);
}

변수가 아직 정의되지 않은 경우 대체 값이 사용됩니다. 브라우저 비호환성에 대한 대체 수단으로 사용되지 않습니다.

결론

이것이 CSS 변수를 사용하는 방법입니다! Internet Explorer와 같은 일부 브라우저는 지원하지 않으므로 모든 브라우저를 지원해야 하는 경우 이를 고려해야 합니다.

이 기사는 원래 my personal blog에 게시되었습니다.