CSS 변수

Mar 22 2022

CSS와 관련하여 응용 프로그램이 여러 위치에서 동일한 색상 또는 동일한 테두리 반경을 가지고 있고 귀하(또는 귀하의 클라이언트)가 변경이 필요하다고 결정할 때 길을 잃기 쉽습니다. 수백 개의 다른 장소에 동일한 색상이 있고 더 어둡게 해야 한다고 결정했다고 가정합니다. 너 뭐하니? 찾아서 교체하시겠습니까? 손으로 추적하시겠습니까? 고맙게도 CSS에는 CSS 변수(때로는 사용자 정의 속성이라고도 함)에 대한 훌륭한 솔루션이 있습니다.

CSS와 관련하여 응용 프로그램이 여러 위치에서 동일한 색상 또는 동일한 테두리 반경을 가지고 있고 귀하(또는 귀하의 클라이언트)가 변경이 필요하다고 결정할 때 길을 잃기 쉽습니다. 수백 개의 다른 장소에 동일한 색상이 있고 더 어둡게 해야 한다고 결정했다고 가정합니다. 너 뭐하니? 찾아서 교체하시겠습니까? 손으로 추적하시겠습니까?

고맙게도 CSS에는 CSS 변수 (때로는 사용자 정의 속성이라고도 함)에 대한 훌륭한 솔루션이 있습니다. --primary-colorCSS 변수는 특정 속성을 빠르게 업데이트하고, CSS 파일을 건조하고, 다른 개발자가 코드를 보다 직관적으로 만들 수 있도록 하는 데 탁월합니다 #3f1314.

코드에서 CSS 변수를 구현하는 방법을 보여주기 위해 이 간단한 시작 페이지를 만들었습니다. 계속 읽는 동안 style.css 파일을 자유롭게 둘러보세요. 애플리케이션에서 사용자 정의 속성이 어떻게 작동하는지 더 잘 이해할 수 있기 때문입니다.

CSS 변수란 무엇입니까?

CSS 변수는 하위 요소로 계단식으로 배열될 수 있는 스타일 시트 내에 정의된 사용자 정의 속성입니다. 사용자 정의 속성이 선언될 때마다 실제로 애플리케이션 내에서 사용할 수 있는 새 속성을 만드는 것입니다. 이것은 "padding"과 같은 표준 속성이 아니므로 브라우저에 새 속성이 무엇인지 알려야 합니다. 선택자 내에서 새 속성을 선언하여 이를 수행할 수 있습니다.

그것을 분해.

위의 예에서 가장 먼저 알 수 있는 것은 " :root" 선택기입니다. 루트는 문서의 루트 요소( <html>대부분의 경우 요소)를 참조하는 의사 클래스 선택기입니다. 그러나 <html>요소를 선택하는 데 사용되지만 루트가 더 높은 수준의 특이성을 갖습니다. 일반적으로 :root의사 클래스 내에서 사용자 정의 속성을 선언하는 것이 가장 좋습니다. 이렇게 하면 문서의 모든 위치에서 변수에 액세스할 수 있습니다.

이제 루트 선택기가 무엇인지 알았으므로 사용되는 구문에 대해 이야기해 보겠습니다. 새 사용자 정의 변수를 선언하려면 "사용자 정의 속성 표기법"이라는 것을 사용해야 합니다. 이 표기법은 두 개의 대시, 변수 이름 및 변수 값(예: --name: value;)으로 구성됩니다.

루트 요소에서 변수를 선언하면 문서의 모든 위치에서 변수에 액세스할 수 있습니다. 버튼 선택기를 살펴보고 이러한 속성에 액세스하는 방법을 살펴보겠습니다.

위에 표시된 것처럼 함수 내의 함수 를 통해 --primary-clr우리의 속성과 속성에 액세스 합니다. 사용자 정의 속성은 루트 요소에서 선언되었으므로 모든 선택기에서 액세스할 수 있습니다.--secondary-clrvar()linear-gradient()

이러한 방식으로 사용자 정의 속성을 선언하고 호출하면 루트 요소에서 이러한 변수에 대한 전역 업데이트를 수행할 수 있습니다.

파란색으로 변경 --secondary-clr하여 버튼 색상 뿐만 아니라 속성을 활용하여 테두리 색상도 변경 --secondary-clr하였습니다.

보너스: `calc()`CSS 변수와 함께 함수 사용.

기본 테두리와 버튼이 동일하게 border-radius유지되는 것을 원하지 않지만 여전히 비례하기를 원하는 경우 이 calc()기능을 사용할 수 있습니다. border-radius버튼 선택기, 특히 속성 을 다시 살펴보겠습니다 .

CSS 변수

CSS 변수란 무엇입니까?

그것을 분해.

보너스: calc()CSS 변수와 함께 함수 사용.

보너스: `calc()`CSS 변수와 함께 함수 사용.