CSS 변수에 대한 심층적인 이해(정리된 요약)

이 기사는 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() function

변수를 선언한 후 자연스럽게 변수를 가져와 사용하고 싶고 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);
}

Scope

동일한 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 작업(본질)을 감지할 수도 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!