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에 게시되었습니다. 이 게시물이 마음에 들고 다른 사람들이 좋아하는 것을 읽고 싶다면 거기로 가십시오.
Reference
이 문제에 관하여(CSS 변수로 CSS 슈퍼파워 제공), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/m0nica/getting-started-with-css-variables-2jh4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)