CSS 변수로 CSS 슈퍼파워 제공

CSS 변수란 무엇입니까?

CSS 변수 또는 CSS 사용자 정의 속성은 CSS 프로젝트 내에서 재사용 가능한 값을 선언하는 방법입니다. CSS 변수는 코드의 반복을 크게 줄이고 "--accent-color"와 같은 스타일시트 전체에서 "#b5838d"를 나타내는 실제 값과 같은 의미론적으로 의미 있는 이름을 참조할 수 있도록 합니다.

대부분의 최신 브라우저는 CSS 변수를 지원합니다. 폴리필 없이 특정 브라우저에서 CSS 변수가 지원되는지 여부를 알아야 하는 경우 Can I Use? 또는 MDN web docs 과 같은 사이트에서 브라우저 호환성 사양을 참조하는 것이 가장 좋습니다.


현재 CSS 변수 브라우저 지원(출처: MDN Web Docs )

CSS 변수를 선언하는 방법

CSS 변수를 사용하려면 앞에 이중 하이픈이 추가된 문자열인 CSS 사용자 정의 속성을 생성해야 합니다--. 이러한 속성은 선택기에 따라 범위가 지정되고 사용 가능합니다. 일반적으로 전체 사이트에 적용되도록 선택기를 의사 선택기:root로 만드는 것이 좋습니다. 보다 구체적인 선택기를 선택하면 그에 따라 변수 값에 액세스할 수 있는 범위가 변경됩니다.

아래는 스타일시트 내에서 서로 다른 색상을 나타내기 위해 선언된 5개의 서로 다른 CSS 변수를 보여주는 예입니다.

:root {
  --white: #fff;
  --accent-color: #b5838d;
  --dark-accent-color: #a6757f;
  --main-color: #6d6875;
  --dark-main-color: #56505f;
}

CSS 전체에서 이러한 CSS 값에 액세스하기 위해 var() 와 같은 var(--accent-color) 메서드를 사용할 수 있습니다. 다음 예제에서는 signup 클래스가 있는 요소를 선택하고 배경색을 #b5838d 로 변경합니다.

.signup {
  background-color: var(--accent-color);
}

--accent-color의 값은 CSS 변수로 설정되므로 나중에 var(--accent-color)의 값을 변경하기로 결정하면 변수 값이 선언된 한 곳에서만 값을 변경하면 됩니다. 변수 값이 업데이트되면 새 값이 참조되는 모든 위치var(--accent-color)에 자동으로 반영됩니다. 색상으로만 결합된 관련 없는 여러 요소에 대해 한 곳에서 색상을 변경할 수 있다는 것은 강력합니다.

CSS 변수의 힘

CSS 변수를 사용하면 찾기 및 바꾸기를 수행하지 않고도 색 구성표를 빠르게 사용하고 참조되는 모든 곳에서 동일한 색을 조정할 수 있습니다. 또한 CSS 변수를 설정하면 나머지 스타일시트 내의 값을 명시적으로 변경하지 않고도 테마 간에 변수 선언 값을 전환할 수 있으므로 색 구성표를 만들 때 개발자 환경을 개선할 수 있습니다.

아래의 두 스크린샷은 CSS 파일의 한 줄이 --accent-color: orange;에서 --accent-color: #b5838d;로 변경될 때 모양의 차이를 보여줍니다. 이 줄은 카드의 border-top 속성과 가입을 위한 배경색에서 완전히 별개의 두 위치에서 사용됩니다. 단추. 이것은 스타일시트가 커지고 값이 전반적으로 재사용될 때 매우 유용할 수 있습니다.

--accent-color: orange;--accent-color: #b5838d;

CSS 변수를 살펴보세요!

editing the below Codepen의 CSS 변수 값을 가지고 놀아 CSS 변수가 작동하는지 확인하십시오!



이 문서는 원래 www.aboutmonica.com에 게시되었습니다. 이 게시물이 마음에 들고 다른 사람들이 좋아하는 것을 읽고 싶다면 거기로 가십시오.