CSS 변수란 무엇입니까?

개요 및 연혁

처음에 CSS는 기본 변수에 대한 지원이 부족하여 개발자가 전처리기 변수를 사용하여 이 문제를 해결한 SAAS와 같은 CSS 전처리기로 전환했습니다.

CSS 변수는 다른 언어의 다른 변수와 마찬가지로 사용됩니다. 즉, then에 특정 값을 할당하고 나중에 해당 값을 참조합니다. (값은 실제로 저장되지 않음)

사용자 정의 속성 또는 계단식 변수라고도 합니다. (따라서 이 블로그 게시물에서 서로 바꿔서 사용할 수 있습니다.)

CSS 변수를 정의하고 사용하는 방법과 CSS 변수의 범위는 무엇입니까?

Javascript에서 우리는 일반적으로 다음 방법 중 하나로 변수를 선언하고 초기화합니다.

let a = 10;
const b = 20;
var c = 30;

그러나 CSS에서는 let , const , var 와 같은 키워드를 사용하지 않습니다. 대신 사용자 정의 변수 이름 앞에 하이픈 2개(대시 --)를 사용하고 범위에 넣습니다.
예scope , Javascript와 마찬가지로 함수 범위, 블록 범위, 전역 범위와 같은 범위가 있습니다. CSS에도 범위가 있습니다.

:root {
  --main-color: red;
}

여기서는 :root 선택기를 사용했습니다. DOM의 최상위 요소를 대상으로 하므로 전역 범위를 갖습니다. 마찬가지로 다른 CSS 선택기를 기반으로 다른 로컬 범위를 가질 수 있습니다.
그러나 특정성에 대한 질문이 발생합니다. 예를 들어 전역 수준과 지역 수준에서 동일한 CSS 속성을 정의했다고 가정하면 어떤 값이 선호됩니까?
이를 위해 다음 코드 스니펫을 고려하십시오.

여기서 우리는 많은 것을 알 수 있습니다.

CSS-변수에 액세스하는 방법.

지역 변수는 전역 변수보다 우선 순위가 높습니다.

우리는 속성을 사용하고 나중에 선언할 수 있으며 CSS는 div의 경우와 같이 여전히 이를 고려합니다.

var()를 사용하여 CSS 변수에 액세스

위에서 보았듯이 var() 함수를 사용하여 위에서 정의한 CSS 변수에 접근할 수 있습니다.var() 함수는 속성 이름을 인수로 사용하고 스타일시트가 있는 경우 해당 값을 검색하여 실제 CSS 속성으로 바꿉니다.
따라서 CSS의 다른 언어 변수와 달리 값을 저장하지 않고 사용할 때 실제 CSS 값으로 대체합니다.

var() 속성이 누락된 경우 대체 값을 제공하는 데 사용할 수도 있습니다.

div {
  font-size: var(--main-font-size, 16px);
}

자바스크립트 내에서 CSS 변수 사용하기

Javascript에서 CSS-Variable에 액세스하고 변경하는 방법을 이해하려면 다음 Codepen을 고려하십시오.

런타임에 사용자 정의 속성 값을 가져오려면 계산된 CSSStyleDeclaration 개체의 getPropertyValue() 메서드를 사용하십시오.

런타임에 사용자 정의 속성 값을 설정하려면 CSSStyleDeclaration 객체의 setProperty() 메소드를 사용하십시오.

코드에서 CSS 변수 사용의 이점:

다음 CSS 코드를 고려하십시오.

:root {
  --main-font-color: #E9E9E9;
  --main-bg-color: rgba(128,128,0,1);
}
p {
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
}
span {
  color: #E9E9E9;
  background-color: rgba(128,128,0,1);
}

이제 CSS를 사용하는 두 가지 방법, 즉 CSS 변수를 사용하거나 사용하지 않는 방법을 모두 살펴보았으므로 CSS 변수가 없는 CSS보다 CSS 변수를 사용하면 어떤 이점이 있는지 살펴보겠습니다.
1. 유지보수 용이성:
적절한 스타일과 색상을 선택하는 데 몇 시간을 투자했는데 갑자기 스타일 요구 사항이 변경되었다고 가정해 보겠습니다. 색상과 스타일을 변경하려면 전체 프로젝트를 거쳐야 하지만 CSS 변수를 사용한 경우 CSS 속성 값을 한 번만 변경하면 모든 위치에 반영될 수 있다고 가정합니다.
2. 코드가 더 읽기 쉬워집니다.
위에서 볼 수 있듯이 변수는 의미론적 의미를 포함할 수 있도록 사용자 정의되며, 따라서 이러한 변수를 사용하는 것이 이해하고 유지하기가 훨씬 쉬워지기 때문에 더 의미가 있습니다.

네이티브 CSS 변수는 SAAS와 같은 전처리기 변수와 어떻게 다릅니까?

주요 차이점 중 하나는 네이티브 CSS 변수를 런타임에 동적으로 수정할 수 있다는 것입니다.

내부에 CSS 속성을 정의하십시오. media-queries .
다른 차이점에 대해서는 CSS-Tricks에 대한 놀라운 기사에 대한 다음 섹션을 참조하십시오.

추가 읽기:

S.No.
링크


1
CSS Variables: Why Should You Care? [Google Developers]

2
What is the difference between CSS variables and preprocessor variables? [CSS-Tricks]

삼
Using CSS custom properties (variables) [MDN]