이 기사는 CSS 변수에 대한 관련 지식을 제공합니다. 기본 CSS는 점차적으로 중첩, 변수 및 함수 기능을 지원하기 시작했습니다.
Sass나 Less를 사용해 본 사람이라면 주로 중첩, 변수, 함수 기능을 가질 수 있다는 것을 알고 있을 것입니다. 사실 네이티브 CSS에서는 이를 점차 지원하기 시작했습니다. CSS 변수를 이해하면 CSS가 지금부터 매우 강력해짐을 알게 될 것입니다.
변수를 선언할 때는 변수 이름 앞에 두 개의 하이픈(--)을 추가해야 합니다.
// 局部声明 body { --foo: #ed145b; --bar: #F7EFD2; } // 全局声明 :root{ --foo: #ed145b; --bar: #F7EFD2; }
예를 들어 위에서는 --foo와 --bar라는 두 개의 변수를 선언했습니다. 사실, CSS 사용자 정의 속성으로 이해하면 됩니다. 색상 및 글꼴 크기와 같은 형식 속성과 다르지 않지만 CSS 변수 이름은 대소문자를 구분하며 일반적으로 CSS입니다. 우리는 그렇지 않다고 씁니다.
변수를 나타내기 위해 두 개의 연결선(--)을 선택하는 이유가 무엇인지 궁금해하실 수도 있습니다. $foo는 Sass에서 사용되고 @foo는 Less에서 사용되기 때문입니다. 충돌을 피하기 위해 공식 CSS 변수는 대신 두 개의 연결선을 사용합니다.
이름 지정과 관련하여 다양한 언어에는 몇 가지 표시가 있습니다. 예를 들어 CSS 선택기는 숫자로 시작할 수 없으며 JS의 변수는 직접 숫자일 수 없습니다. 그러나 CSS 변수에는 이러한 제한이 없습니다. , 예:
:root { --1: #369; } body { background-color: var(--1); }
에는 $, [, ^, (, % 등의 문자를 포함할 수 없습니다. 일반 문자는 "숫자 [0-9]", "문자 [a-zA-Z]", "로 제한됩니다. underscore_" 및 "dash" Line -" 이러한 조합은 중국어, 일본어 또는 한국어일 수 있습니다. 예:
body { --深蓝: #369; background-color: var(--深蓝); }
변수를 선언한 후 자연스럽게 변수를 가져와 사용하고 싶고 var는 () 함수는 변수를 읽는 데 사용됩니다. 변수의 두 번째 매개변수
p { color: var(--foo); border::1px solid var(--bar); }
var()
color: var(--foo, #ED145B); //第二个参数就是默认值,假设--foo为空情况下,会使用#ED145B
var() 함수는 변수 선언에도 사용할 수 있습니다.
:root { --primary-color: red; --logo-text: var(--primary-color); // 上面刚声明,这里就可以使用 }
변수 값은 속성 값으로만 사용할 수 있으며, 속성 이름
.foo { --side: margin-top; /* 很显然,下面是无效的 */ var(--side): 20px; }
변수 값이 문자열인 경우 다른 문자열과 결합될 수 있습니다.
--bar: 'hello'; --foo: var(--bar)' world'; // 示例 body:after { content: '--screen-category : 'var(--screen-category); }
변수 값이 숫자 값인 경우 숫자 단위와 직접 사용할 수 없습니다
foo { --gap: 20; /* 下面无效 */ margin-top: var(--gap)px; /* 通过calc去计算,下面有效 */ margin-top: calc(var(--gap) * 1px); }
If 변수 값에는 단위가 있으므로 문자열로 쓸 수 없습니다
/* 无效 */ .foo { --foo: '20px'; font-size: var(--foo); } /* 有效 */ .foo { --foo: 20px; font-size: var(--foo); }
동일한 CSS 변수를 여러 선택자에서 선언할 수 있습니다. 읽을 때 우선 순위가 가장 높은 선언이 적용됩니다. " CSS의 규칙입니다.
<style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } </style> <p>蓝色</p> <div>绿色</div> <div id="alert">红色</div>
위 코드에서는 3개입니다. 선택자는 모두 --color 변수를 선언합니다. 서로 다른 요소가 이 변수를 읽을 때 우선 순위가 가장 높은 규칙이 사용되므로 세 문단의 색상은
지원되지 않는 CSS 변수의 경우 다음 작성 방법을 사용할 수 있습니다.
a { color: #7F583F; color: var(--primary); // 应该很好理解,如果这里读不出值,那么并不会覆盖上面的color }
@support 명령을 사용하여
a { @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ }
JavaScript 브라우저가 CSS 변수를 지원하는지 여부도 감지할 수 있습니다.
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ }
JavaScript 작업 CSS 변수 작성 방법 아래와 같이
// 设置变量 document.body.style.setProperty('--primary', '#7F583F'); //局部 document.documentElement.style.setProperty('--primary', '#7F583F'); //全局 // 读取变量 document.body.style.getPropertyValue('--primary').trim(); /局部 document.documentElement.style.getPropertyValue('--primary').trim(); /全局 getComputedStyle(document.documentElement).getPropertyValue('--time'); // 全局,如果是在css表中设置的需要这种方式获取 // '#7F583F' // 删除变量 document.body.style.removeProperty('--primary'); //局部 document.documentElement.style.removeProperty('--primary'); //全局
이는 JavaScript가 스타일 시트에 어떤 값이든 저장할 수 있다는 의미입니다. 아래는 이벤트를 수신하는 예입니다. , 이벤트 정보는 CSS 변수
const docStyle = document.documentElement.style; document.addEventListener('mousemove', (e) => { docStyle.setProperty('--mouse-x', e.clientX); docStyle.setProperty('--mouse-y', e.clientY); });
에 저장됩니다. 이는 JavaScript가 스타일 시트에 어떤 값이든 저장할 수 있음을 의미합니다. 다음은 이벤트 모니터링의 예입니다. 이벤트 정보는 CSS 변수
const docStyle = document.documentElement.style; document.addEventListener('mousemove', (e) => { docStyle.setProperty('--mouse-x', e.clientX); docStyle.setProperty('--mouse-y', e.clientY); });
에 저장됩니다. CSS에 쓸모가 없는 것을 CSS 변수에 넣을 수도 있습니다
--foo: if(x > 5) this.width = 10;
위 코드에서 --foo 값은 CSS에서 잘못된 구문입니다. 하지만 이는 CSS 변수에 스타일 설정을 작성할 수 있다는 의미입니다. 따라서 CSS 변수는 JavaScript가 CSS와 통신할 수 있는 방법을 제공합니다.
브라우저 기본 기능은 번역 없이 직접 실행할 수 있습니다.
DOM 객체의 멤버로, CSS와 JS의 연결
Sass/Less 사용에 지장을 주지 않으며, 결합하여 사용할 수 있습니다
(동영상 공유 학습: CSS 동영상 튜토리얼)
위 내용은 CSS 변수에 대한 심층적인 이해(정리된 요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!