CSS 변수 설명 및 튜토리얼

CSS는 우리 프론트엔드 개발에 없어서는 안 될 언어입니다. CSS에는 항상 변수가 없었기 때문에 이를 잘 활용하면 SASS나 LESS와 같은 Precompiler만 사용할 수 있습니다. . 올해 3월, Microsoft는 Edge 브라우저에서 CSS 변수를 지원할 것이라고 발표했습니다. 이 중요한 새로운 CSS 기능은 이미 모든 주요 브라우저에서 지원됩니다. 이 기사에서는 이를 사용하는 방법에 대한 포괄적인 소개를 제공하며 기본 CSS가 매우 강력하다는 것을 알게 될 것입니다. 이 기사에서는 CSS 변수의 몇 가지 용도를 배울 수 있습니다.

1. 변수 선언

변수 선언 시 변수명 앞에 하이픈(--) 2개를 추가해야 합니다.

body {
  --foo: #7F583F;
  --bar: #F7EFD2;}

위 코드에서는 본문 선택기에 --foo와 --bar라는 두 개의 변수가 선언되어 있습니다.

색상, 글꼴 크기 등 형식적 속성과 다르지 않지만 기본 의미는 없습니다. 따라서 CSS 변수를 "CSS 사용자 정의 속성"이라고도 합니다. 변수와 사용자 정의 CSS 속성은 실제로 동일하기 때문입니다.

변수를 나타내기 위해 두 개의 연결선(--)을 선택하는 이유가 무엇인지 궁금해하실 수도 있습니다. $foo는 Sass에서 사용되고 @foo는 Less에서 사용되기 때문입니다. 충돌을 피하기 위해 공식 CSS 변수는 대신 두 개의 연결선을 사용합니다.

CSS 변수에는 다양한 값을 넣을 수 있습니다.

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);}

변수 이름은 대소문자를 구분하며 --header-color와 --Header-Color는 서로 다른 두 변수입니다.

2.var() 함수

var() 함수는 변수를 읽는 데 사용됩니다.

a {
  color: var(--foo);
  text-decoration-color: var(--bar);}

var() 함수는 두 번째 매개변수를 사용하여 변수의 기본값을 나타낼 수도 있습니다. 변수가 존재하지 않으면 이 기본값이 사용됩니다.

color: var(--foo, #7F583F);

두 번째 매개변수는 내부 쉼표나 공백을 처리하지 않으며 매개변수의 일부로 간주됩니다.

var(--font-stack, "Roboto", "Helvetica");var(--pad, 10px 15px 20px);
var()函数还可以用在变量的声明。
:root {  --primary-color: red;  --logo-text: var(--primary-color);}

변수 값은 속성 이름이 아닌 속성 값으로만 ​​사용할 수 있습니다.

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;}

위 코드에서는 --side 변수가 속성 이름으로 사용되는데 이는 유효하지 않습니다.

3. 변수 값의 종류

변수 값이 문자열인 경우 다른 문자열과 연결될 수 있습니다.

--bar: 'hello';--foo: var(--bar)' world';

디버깅하는 데 사용하세요(예제).

body:after {
  content: '--screen-category : 'var(--screen-category);}

변수 값이 숫자 값인 경우 숫자 단위와 함께 직접 사용할 수 없습니다.

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;}

위 코드에서는 값과 단위를 직접 함께 적어서 유효하지 않습니다. 연결하려면 calc() 함수를 사용해야 합니다.

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);}

변수 값에 단위가 있으면 문자열로 쓸 수 없습니다.

/* 无效 */.foo {  --foo: '20px';  font-size: var(--foo);}
/* 有效 */.foo {  --foo: 20px;  font-size: var(--foo);}

4. 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>

위 코드에서 세 가지 선택기는 모두 --color 변수를 선언합니다. 서로 다른 요소가 이 변수를 읽을 때 우선 순위가 가장 높은 규칙이 사용되므로 텍스트의 세 단락 색상이 다릅니다.

이는 변수의 범위가 변수가 위치한 선택기의 유효한 범위임을 의미합니다.

body {
  --foo: #7F583F;}.content {
  --bar: #F7EFD2;}

위 코드에서 --foo 변수의 범위는 body 선택자의 유효 범위이고, --bar의 범위는 .content 선택자의 유효 범위입니다.

이러한 이유로 전역 변수는 일반적으로 모든 선택기가 읽을 수 있도록 루트 요소인 root 내에 배치됩니다.

:root {
  --main-color: #06c;}

5. 반응형 레이아웃

CSS는 동적이며 페이지를 변경하면 채택된 규칙도 변경됩니다.

이 기능을 사용하면 반응형 레이아웃의 미디어 명령에서 변수를 선언하여 다양한 화면 너비에 따라 다양한 변수 값을 가질 수 있습니다.

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;}a {
  color: var(--primary);
  text-decoration-color: var(--secondary);}@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }}

6. 호환성 처리

CSS 변수를 지원하지 않는 브라우저의 경우 다음 작성 방법을 사용할 수 있습니다.

a {
  color: #7F583F;
  color: var(--primary);}

@support 명령을 사용하여 감지할 수도 있습니다.

@supports ( (--a: 0)) {
  /* supported */}@supports ( not (--a: 0)) {
  /* not supported */}

7. 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.body.style.getPropertyValue('--primary').trim();
// '#7F583F'// 删除变量document.body.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);});

CSS에 쓸모없는 정보는 CSS 변수에 넣을 수도 있습니다.

--foo: if(x > 5) this.width = 10;

위 코드에서 --foo 값은 CSS에서는 잘못된 구문이지만 JavaScript에서는 읽을 수 있습니다. 이는 CSS 변수에 스타일 설정을 작성하고 JavaScript가 이를 읽도록 할 수 있음을 의미합니다.

따라서 CSS 변수는 JavaScript가 CSS와 통신할 수 있는 방법을 제공합니다.

CSS 변수에 대해 많은 것을 배웠다고 생각합니다. 이 튜토리얼이 업무에 도움이 되기를 바랍니다.

관련 튜토리얼:

새로운 지식: CSS 변수-변수

첫 번째 CSS 변수: currentColor_html/css_WEB-ITnose

CSS 변수 trial_html/css_WEB-ITnose

위 내용은 CSS 변수 설명 및 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!