CSS 변수란 무엇입니까? CSS 변수에 대해 알아보기: CSS 변수의 상속 및 범위

php是最好的语言
풀어 주다: 2018-07-30 14:30:01
원래의
1930명이 탐색했습니다.

CSS 변수가 우리에게 도움이 되는 것

Java, C++ 또는 JavaScript와 같은 일부 명령형 프로그래밍 언어에서는 변수를 통해 특정 상태를 추적할 수 있습니다. 변수는 특정 값과 관련된 기호이며 변수의 값은 시간이 지남에 따라 변경될 수 있습니다.
CSS와 같은 선언적 언어에서는 시간이 지남에 따라 변하는 값이 존재하지 않으며, 변수라는 개념도 없습니다.
CSS는 유지 관리 문제에 쉽게 대처할 수 있도록 계층적 변수 개념을 도입합니다. 이렇게 하면 전체 CSS 트리에서 변수를 기호적으로 참조할 수 있습니다.

1. CSS 변수란 무엇입니까? 현재 CSS 변수에는 유효한 식별자와 유효한 값이 있는

변수라는 두 가지 형식이 있습니다. 어디서나 사용할 수 있습니다. var() 함수를 사용하여 변수를 사용할 수 있습니다. 예를 들어 var(--example-variable)은 --example-variable

Custom 속성에 해당하는 값을 반환합니다. 이러한 속성은 이름으로 특수 형식 --

where
을 사용합니다. 예를 들어 --example-variable: 20px; CSS 선언문도 마찬가지입니다. --example-varibale 변수에 20px을 할당한다는 의미입니다 2. 변수 선언

변수 이름 지정

변수 선언은 두 개의 연결선을 사용합니다. 변수를 나타내기 위해 $color는 Sass에 속하는 구문이고 @color는 CSS 기본 변수와의 충돌을 피하기 위해 Sass Less 구문에 속하는 구문--)

참고: 변수 이름은 대소문자를 구분합니다.
두 개의 다른 변수입니다
--header-color--Header-Color선언 방법

CSS 변수를 선언하는 방법은 매우 간단합니다. 다음과 같이 이름이 선언됩니다. color라는 CSS 변수입니다.

    css 파일에 작성하세요
  • html 태그의 인라인 스타일로 작성하세요
  • JS를 사용하여 .style.setProperty 메소드를 사용하여 요소를 선언하세요
  • body{
      --color: red;
    }
    <body style="--color: red;"></body>
    document.getElementsByTagName(&#39;body&#39;)[0].style.setProperty(&#39;--color&#39;, &#39;red&#39;)
    로그인 후 복사
  • 유형 변수값
변수값이 문자열이면 다른 문자열과 연결될 수 있습니다
--bar: &#39;hello&#39;;
--foo: var(--bar)&#39; world&#39;;


body:after {
  content: &#39;--screen-category : &#39;var(--screen-category);
}
로그인 후 복사

변수값이 숫자값이면 숫자단위로 직접 연결될 수 없습니다. calc() 함수를 사용해야 합니다. 연결하려면

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

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}
로그인 후 복사

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

/* 无效 */
.foo {
  --foo: &#39;20px&#39;;
  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)의 결과는 다음과 같습니다.

    class="two" 해당 노드: 10px
  • class="3" 해당 노드: 요소: 2em
  • class="four" 해당 노드: 10px(상위 항목에서 상속됨)
  • class="one"에 해당하는 노드: 잘못된 값, 즉 속성 값은 사용자 정의 CSS 변수에 의해 재정의되지 않은 기본값입니다. 최상위 범위는 root
  • 4. 반응형

    p {
      --color: #7F583F;
      --bg: #F7EFD2;
    }
    
    .mediabox {
      color: var(--color);
      background: var(--bg);
    }
    
    @media screen and (min-width: 768px) {
      body {
        --color:  #F7EFD2;
        --bg: #7F583F;
      }
    }
    로그인 후 복사
  • 5. 전처리기와의 차이점

1. 전처리기 변수는 실시간이 아닙니다

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}
로그인 후 복사

컴파일 결과

.mediabox {
  background: #7F583F; 
}
로그인 후 복사

2. 전처리기는 범위를 제한할 수 없습니다

$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(&#39;--testMargin&#39;).trim();
console.log(cssVariable1); // &#39;70px&#39;
 
// 写入
document.documentElement.style.setProperty(&#39;--testMargin&#39;, &#39;100px&#39;);
var cssVariable2 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable2);  // &#39;100px&#39;

// 删除
document.documentElement.style.removeProperty(&#39;--testMargin&#39;);
var cssVariable3 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable3); // &#39;70px&#39;
로그인 후 복사

7와 상호 작용할 수 있습니다. 호환성

CSS 사용자 정의 속성 메서드 지원 여부

/*css*/

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

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

if (window.CSS && window.CSS.supports && window.CSS.supports(&#39;--a&#39;, 0)) {
    alert(&#39;CSS properties are supported&#39;);
} else {
    alert(&#39;CSS properties are NOT supported&#39;);
}
로그인 후 복사

요약

LESS 및 SASS와 같은 기존 전처리기 변수와 비교할 때 CSS 변수의 장점은 다음과 같습니다.

CSS 변수는 동적이며 페이지가 실행되는 동안 변경될 수 있지만 기존 전처리기 변수는 컴파일 후에 변경할 수 없습니다.

CSS 변수는 상속, 조합 사용 및 범위를 가질 수 있습니다

  • Javascript와 함께 사용하면 JS

  • 관련 기사 :

  • PHP 학습-변수 변수, - 변수 변수

php 학습 로그 - 변수 범위, 변수

관련 동영상:

Geek Academy CSS 및 CSS3 동영상 튜토리얼

위 내용은 CSS 변수란 무엇입니까? CSS 변수에 대해 알아보기: CSS 변수의 상속 및 범위의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!