Java, C++ 또는 JavaScript와 같은 일부 명령형 프로그래밍 언어에서는 변수를 통해 특정 상태를 추적할 수 있습니다. 변수는 특정 값과 관련된 기호이며 변수의 값은 시간이 지남에 따라 변경될 수 있습니다.
CSS와 같은 선언적 언어에서는 시간이 지남에 따라 변하는 값이 존재하지 않으며, 변수라는 개념도 없습니다.
CSS는 유지 관리 문제에 쉽게 대처할 수 있도록 계층적 변수 개념을 도입합니다. 이렇게 하면 전체 CSS 트리에서 변수를 기호적으로 참조할 수 있습니다.
변수라는 두 가지 형식이 있습니다. 어디서나 사용할 수 있습니다. var() 함수를 사용하여 변수를 사용할 수 있습니다. 예를 들어 var(--example-variable)은 --example-variable
Custom 속성에 해당하는 값을 반환합니다. 이러한 속성은 이름으로 특수 형식 --where
을 사용합니다. 예를 들어 --example-variable: 20px; CSS 선언문도 마찬가지입니다. --example-varibale 변수에 20px을 할당한다는 의미입니다 2. 변수 선언
참고: 변수 이름은 대소문자를 구분합니다.
두 개의 다른 변수입니다--header-color
和--Header-Color
선언 방법
body{ --color: red; } <body style="--color: red;"></body> document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')
--bar: 'hello'; --foo: var(--bar)' world'; body:after { content: '--screen-category : 'var(--screen-category); }
변수값이 숫자값이면 숫자단위로 직접 연결될 수 없습니다. calc() 함수를 사용해야 합니다. 연결하려면
.foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px; } .foo { --gap: 20; margin-top: calc(var(--gap) * 1px); }
변수 값에 단위가 있으면 문자열로 쓸 수 없습니다
/* 无效 */ .foo { --foo: '20px'; font-size: var(--foo); } /* 有效 */ .foo { --foo: 20px; font-size: var(--foo);
참고: 변수 값은 속성 이름이 아닌 속성 값으로만 사용할 수 있습니다
.foo { --side: margin-top; /* 无效 */ var(--side): 20px; }
위 코드에서, --side 변수는 유효하지 않은 속성 이름으로 사용됩니다
3. CSS 변수 상속 및 범위
class="one"> <p class="two"> <p class="three"> </p> <p class="four"> </p> <p> </p>
다음 CSS를 정의하세요.
.two { --test: 10px; } .three { --test: 2em; }
이 예에서 var(--test)의 결과는 다음과 같습니다.
4. 반응형
p { --color: #7F583F; --bg: #F7EFD2; } .mediabox { color: var(--color); background: var(--bg); } @media screen and (min-width: 768px) { body { --color: #F7EFD2; --bg: #7F583F; } }
1. 전처리기 변수는 실시간이 아닙니다
$color:#7F583F; @media screen and (min-width: 768px) { $color: #F7EFD2; } .mediabox { background: $color; }
.mediabox { background: #7F583F; }
$zcolor:blue; .ulbox { $zcolor:red; } ul{ color: $zcolor; }
컴파일됨
ul { color: blue; }
3. 기본 CSS 사용자 정의 속성은 모든 CSS 전처리기 또는 순수 CSS 파일과 함께 사용할 수 있습니다
6. JS 작업 변수
CSS 변수는 JS
:root{ --testMargin:70px; } // 读取 var root = getComputedStyle(document.documentElement); var cssVariable1 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable1); // '70px' // 写入 document.documentElement.style.setProperty('--testMargin', '100px'); var cssVariable2 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable2); // '100px' // 删除 document.documentElement.style.removeProperty('--testMargin'); var cssVariable3 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable3); // '70px'
7와 상호 작용할 수 있습니다. 호환성
CSS 사용자 정의 속성 메서드 지원 여부
/*css*/ @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ } // Js if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) { alert('CSS properties are supported'); } else { alert('CSS properties are NOT supported'); }
LESS 및 SASS와 같은 기존 전처리기 변수와 비교할 때 CSS 변수의 장점은 다음과 같습니다.
CSS 변수는 동적이며 페이지가 실행되는 동안 변경될 수 있지만 기존 전처리기 변수는 컴파일 후에 변경할 수 없습니다.
CSS 변수는 상속, 조합 사용 및 범위를 가질 수 있습니다
Javascript와 함께 사용하면 JS
관련 기사 :
위 내용은 CSS 변수란 무엇입니까? CSS 변수에 대해 알아보기: CSS 변수의 상속 및 범위의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!