CSS 변수 변수 분석

不言원래의: 2018-06-12 15:25:261852검색

이 기사에서는 특정 참조 값이 있는 CSS 변수 분석을 주로 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

앞의 말

　CSS에는 항상 변수가 없었습니다. CSS 변수의 경우 SASS 또는 LESS와 같은 사전 컴파일러만 사용할 수 있습니다. 새로운 초안이 출시되면서 CSS에서 직접 변수를 정의하고 사용하는 것은 더 이상 환상이 아닙니다. 이 글에서는 CSS 변수를 자세히 소개하겠습니다

기본 사용법

　 CSS 변수는 문서 전체에서 재사용할 특정 값을 포함하는 CSS 작성자가 정의한 개체입니다. 사용자 정의 속성을 사용하여 변수 이름을 설정하고 특정 var()를 사용하여

에 액세스합니다. 호환성: 모바일 및 IE 브라우저는 호환되지 않습니다.

【변수 선언】

변수는 --로 시작해야 합니다. 예를 들어 --example-variable: 20px는 --example-varibale 변수에 20px를 할당한다는 의미입니다

변수를 선언하는 문을 모든 요소 내에 배치할 수 있습니다. 전역 변수를 설정하려면 다음과 같이 설정할 수 있습니다. : root, body 또는 html

:root{
  --bgColor:#000;
}

　 변수 선언은 일반 스타일 선언문과 동일하며 인라인 스타일도 사용할 수 있습니다

<body style="--bgColor:#000">

　 변수 선언문은 요소에 포함되어야 하며 임의로 배치할 수 없습니다

//错误
<style>
--bgColor:#000;
</style>

【변수 사용】

　Use var( ) 함수는 변수를 사용하므로 어디에서나 사용할 수 있습니다. 예: var(--example-variable)은 --example-variable

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    </body>

에 해당하는 값을 반환합니다. var() 함수에는 변수가 값을 얻을 수 없는 경우 옵션 매개변수도 있습니다. 기본값

<body>
    <p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>    </body>

상속 및 계단식

일반 스타일 속성과 마찬가지로 변수 속성도 상속 및 계단식을 지원합니다. 아래 예에서는 body 요소의 변수 값이 녹색이고, p 요소의 변수 값이 빨간색이며, 캐스케이딩 원리에 따라 p 요소의 최종 배경색은 빨간색입니다.

<body style="--bgColor:green;">
    <p style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></p>    </body>

조합 및 계산

[조합]

　 CSS 변수를 조합하여 사용 가능

<style>.box{
    --top:20%;
    --left:30%;
    width: 100px;
    height: 100px;
    background-image: url(img/24/xiaoshu.jpg);
    background-position: var(--left)  var(--top);}</style><p class="box"></p>

단, CSS 변수는 다음과 같은 형태로 조합할 수 없습니다. var(--color1)var(--color2)는 분리된 경우 브라우저에서 인식되지 않습니다. , 예를 들어 var(--color1) var(--color2) 는 #333으로 구문 분석되며 이는 브라우저에서도 인식할 수 없습니다.

<style>.box{
    --color1:#;
    --color2:333;
    width: 100px;
    height: 100px;
    background-color: var(--color1)var(--color2);}</style><p class="box"></p>

【계산】

　 변수는 조합 외에 일반 스타일 값과 동일합니다. , 계산에 calc를 사용할 수도 있습니다.

<style>.box{
    --borderWidth:2px;
    width: 100px;
    height: 100px;
    background-color:lightblue;
    border-left: calc(var(--borderWidth) * 2) solid black;}</style><p class="box"></p>

JS

　 CSS 변수는 JS 상호 작용과 상호 작용할 수 있습니다. getPropertyValue() 및 setProperty() 메서드만 사용할 수 있으며 스타일 속성

[스타일 속성]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style[&#39;--color&#39;]);    //undefined</script>

[getPropertyValue()]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style.getPropertyValue(&#39;--color&#39;));//&#39;lightgreen&#39;</script>

[setProperty()]

<style>#box{    
    --color:lightgreen;
    background-color: var(--color);
    width: 100px;
    height: 100px;
    display:inline-block;}</style><button id="btn" type="button">变浅蓝</button><p id="box"></p>    <script>var oBox = document.getElementById(&#39;box&#39;);var oBtn = document.getElementById(&#39;btn&#39;);
oBtn.onclick = function(){
    oBox.style.setProperty(&#39;--color&#39;,&#39;lightblue&#39;);
}</script>

은 사용할 수 없습니다. 지원

　한 가지 특별히 주의할 점은 변수가 !important

.box{
    --color:red;
    width: 100px;
    height: 100px;
    background-color:--color !important;
}</style><p class="box"></p>

　크롬 브라우저 스크린샷은 다음과 같습니다

Purpose

　1. 유지 관리성

색 구성표나 크기 구성표를 한 번에 유지합니다. 웹 페이지는 일부 스타일이 CSS 파일에 여러 번 나타나고 반복적으로 사용됨을 의미합니다. 계획을 수정할 때 특정 스타일을 조정하든 전체 계획을 완전히 수정하든 복잡한 문제가 되며, 이때 간단한 검색 및 교체만으로는 충분하지 않습니다. 이때 CSS 변수가 유용합니다

:root{
  --mainColor:#fc0;
}
.p1{
  color:var(--mainColor);
}
.p2{
  color:var(--mainColor);
}

　변수의 두 번째 장점은 이름 자체에 의미 정보가 포함되어 있다는 것입니다. CSS 파일을 읽고 이해할 수 있게 됩니다. main-text-color는 문서의 #fc0보다 이해하기 쉽습니다. 특히 서로 다른 파일에 동일한 색상이 나타날 때

　3. @media 미디어 쿼리를 구현하는 것이 더 편리합니다

일반적으로 미디어 쿼리는 다음과 같습니다

c9ccee2e6ea535a969eb3f532ad9fe89.box{    
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    background-color: red}@media screen and (max-width:600px) {
    .box{
        width: 50px;
        height: 50px;
        padding: 10px;
        margin: 5px;        
    }}531ac245ce3e4fe3d50054a55f2659279890cd3db8af2c13be66110fccb4c14994b3e26ee717c64999d7867364b1b4a3

　그러나 변수를 사용하면 코드를 간소화할 수 있습니다

<style>.box{    
    --base-size:10px;
    width: calc(var(--base-size) * 10);
    height: calc(var(--base-size) * 10);
    padding: calc(var(--base-size) * 2);
    margin: calc(var(--base-size) * 1);
    background-color: red;}@media screen and (max-width:600px) {
    .box{
        --base-size:5px;    
    }}</style><p class="box"></p>

위 내용은 모두의 학습에 도움이 되기를 바랍니다.