CSS 변수를 탐색하면서 저는 언뜻 보기에는 명확하지 않은 흥미로운 잠재력과 미묘한 세부 사항을 많이 발견했습니다. 많은 개발자와 마찬가지로 처음에는 CSS 변수를 간단하고 간단한 방식으로 사용했으며 극단적인 경우는 거의 발생하지 않았습니다. 이 접근 방식은 여러 목적에서 일반적이고 효과적이지만 탐색하고 실험할 것이 더 많다는 의미입니다. 내 생각에는 CSS 변수 명명 규칙과 유효한 값 할당에 대해 더 깊이 이해하면 애플리케이션의 범위와 유연성이 크게 확장될 수 있습니다.
CSS 변수에 대해 보다 철저하고 포괄적인 시각을 제공하기 위해 여기에 연구 결과와 통찰을 정리했습니다. 이 글이 여러분과 저 모두 CSS 변수의 잠재력을 최대한 활용하고 스타일링의 새로운 가능성을 발견하는 데 도움이 되는 자료가 되기를 바랍니다.
이 시리즈에서는 사용자가 --name: value 구문 및 var(--name) 함수와 같은 CSS 변수의 기본 사항에 이미 익숙하거나 기본 개념에 익숙하다고 가정합니다. 이 CSS 변수 소개의 첫 번째 3분의 1에서 다룹니다.
CSS 변수를 사용할 때 가장 먼저 중요한 단계는 이름 지정입니다. 다음은 CSS 변수 이름 지정에 대한 몇 가지 주요 지침입니다.
모든 사용자 정의 속성 이름은 두 개의 하이픈(--)으로 시작해야 합니다(예: --main-color). 이 접두사는 브라우저가 사용자 정의 속성과 기본 CSS 속성을 구별하여 충돌 가능성을 줄이는 데 도움이 됩니다.
CSS 사용자 정의 속성 이름은 대소문자를 구분합니다. 즉, --main-color와 --Main-Color는 완전히 다른 두 변수로 처리됩니다. 대소문자가 일치하지 않는 변수를 실수로 참조하여 구문 분석 오류가 발생하는 것을 방지하려면 코드 전체에서 대소문자를 일관되게 유지하는 것이 중요합니다.
예:
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
독립형 -- 예약되어 있으며 향후 사양에서 특정 목적을 가질 수 있습니다. 따라서 사용자 정의 속성 이름으로 사용하지 마십시오.
예:
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
CSS 변수 이름을 지정할 때 허용되는 문자와 규칙을 고려하여 가독성을 높이고 충돌을 방지하는 것이 중요합니다.
예
다음 예에서는 CSS 변수 이름 지정의 유연성과 특수 문자를 올바르게 처리하는 방법을 보여줍니다.
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
CSS 변수는 다양한 유형의 값을 보유할 수 있지만 특정 구문 규칙을 따라야 합니다. 유효한 값 할당의 몇 가지 예를 살펴보겠습니다.
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
이러한 예에서 볼 수 있듯이 CSS 변수는 다양한 값을 지원합니다. 그러나 CSS 변수는 CSS 속성의 일부이므로 따옴표 및 괄호 일치와 같은 일반 CSS 구문을 따라야 합니다. 이러한 요구 사항을 충족하지 못하는 몇 가지 값을 살펴보겠습니다.
CSS 변수에 잘못된 값을 할당하면 구문 분석 오류가 발생하여 이후 스타일에서 문제가 발생할 수 있습니다. 다음은 잘못된 값 할당의 몇 가지 예입니다.
:root {
/* Naming with Unicode characters */
--primary-color: #3498db;
--secondary-color: #e74c3c;
/* Using an Emoji as a variable name */
--?: #2ecc71;
/* Special characters with escape sequences, resulting in --B&W? */
--B\&W\?: #2ecc72;
/* Using Unicode escape codes, equivalent to --B&W? */
--BWF: #abcdef;
}
.container {
color: var(--BWF); /* Result is #abcdef */
}
.container-alt {
color: var(--B\&W\?); /* Result is #abcdef */
}
CSS 변수는 다른 CSS 속성과 마찬가지로 우선순위에 영향을 미치는 !important 플래그를 지원합니다. 다음은 !important가 변수 우선 순위에 어떤 영향을 미치는지 보여주는 예입니다.
:root {
--foo: if(x > 5) this.width = 10;
--string-with-semicolon: "font-size: 16px;"; /* Strings can include semicolons */
--complex-calc: calc(100% / 3 + 20px); /* Complex calculations with calc() */
--negative-value: -10px; /* Negative values */
--multiple-values: 10px 20px 30px 40px; /* Multiple values, e.g., for margin or padding */
--unitless-number: 1.5; /* Unitless numbers */
--nested-var: var(--string-with-semicolon); /* Nested variables using var() */
--empty-string: ; /* Empty string */
--color: rgba(255, 0, 0, 0.5); /* Color functions */
--special-chars: "Content: \"Hello\""; /* Strings with special characters */
}
이 예에서 #target과 .cls는 모두 div의 --text-color 변수에 영향을 미칩니다. 선택기 특정성에 따라 #target은 .cls를 재정의해야 합니다. 그러나 .cls의 --text-color는 !important를 사용하므로 div에 적용되는 최종 색상은 녹색이 됩니다. !important는 변수 간의 우선순위에만 영향을 미치고 변수를 참조하는 속성에는 전파되지 않는다는 점에 유의하는 것이 중요합니다. 결과 색상은 녹색이 아닌 단순히 녹색입니다. 중요합니다.
:root {
--main-color: blue;
--Main-Color: red; /* Case difference, treated as a separate property */
}
.box1 {
color: var(--main-color); /* Refers to --main-color, resulting in blue */
}
.box2 {
color: var(--Main-Color); /* Refers to --Main-Color, resulting in red */
}
initial을 CSS 변수 값으로 사용하는 것은 독특한 동작입니다. 변수에 할당되면 초기화는 변수를 유효하지 않게 만들어 var()로 액세스할 때 실패하게 만듭니다. 이는 속성이 무효화되지 않는 빈 값(--empty: ;)과 다릅니다. 초기화를 사용하면 변수가 효과적으로 "재설정"되어 해당 정의가 취소됩니다. (참고)
CSS 변수는 다른 변수 참조를 지원하지만 종속성 순환이 발생하면 해당 순환의 모든 변수가 유효하지 않게 됩니다. 종속성 순환의 예는 다음과 같습니다.
:root {
--: green; /* Invalid: a standalone -- is reserved */
--custom-color: green; /* Valid: custom property avoids reserved name */
}
.text {
color: var(--custom-color); /* Uses the custom property */
}
이 예에서는 --one, --two, --3이 서로 참조하여 순환을 생성합니다. 결과적으로 세 변수는 모두 순환 종속성으로 인해 유효하지 않게 되어 해결이 불가능해집니다. (참고)
이 기사에서는 CSS 변수의 이름 지정 및 값 할당 규칙에 대해 자세히 알아보고 일반적인 구문 분석 오류를 피하면서 이러한 변수를 올바르게 정의하고 관리하는 방법을 다루었습니다. 이러한 기본 지식을 바탕으로 향후 개발 프로젝트에서 CSS 변수를 보다 효과적으로 사용할 수 있습니다.
다음 문서에서는 CSS 변수를 더욱 유연하고 강력하게 사용할 수 있는 특정 애플리케이션 시나리오와 함께 var()를 사용하여 CSS 변수 값을 검색하는 방법을 살펴보겠습니다.
위 내용은 CSS 변수에 대해 알지 못할 수 있는 사항 - 명명 규칙 및 값 할당의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
