大家好，我是半夏??，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注? 點贊 ?? 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,了解更多前端知識! 點我探索新世界！
原文鏈接 ==>http://sylblog.xin/archives/43
前言
大部分的編程語言，在語言出現的那一刻就支持變數，但是，CSS一開始就不支持原生變數，所以大家開始選擇SCSS,LESS等兼容的 CSS 擴展語言，不過慶幸的是CSS目前也已經支持變數，
定義變數
在JS中變數可以這樣生命：
var variable;
在CSS中，變數是以兩個-開始的，
div { --divWidth: 100px}
變數作用域
全域作用域 :root
:root { --bk-color: red}
區域作用域
div { --divWidth: 100px}
不同作用域可以出現同樣的變數
div { --divWidth: 100px}
span { --divWidth: 100px}
變數名區分大小寫
:root {
--color: blue;
--COLOR: red;
}
使用變數
在SCSS中我們是這樣定義并使用變數的：
$font-size: 20px
div { font-size: $font-size}
在CSS中，提供了var()函式來使用變數，
上邊的SCSS就可以轉成這樣
:root { --font-size: 16px}
.div { font-size: var(--font-size)}
注意：請不要使用已有的屬性名稱作為變數值，也請不要使用var來做屬性名稱，
下面這個例子是錯誤的：
:root { --fontSize: font-size}
.div { var(--fontSize): 16px}
可以繼承
可以在@media中進行修改
可以在 HTML 的 style 屬性中使用
<html lang="en" style="--color: red;">
.father {
font-size: 100px;
color: var(--color);
}
<div --style="">123123</div>
瀏覽器如何決議
先上CSS
:root {
--color: blue;
}
div {
--color: green;
}
#child2 {
--color: red;
}
* {
color: var(--color);
}
使用上面的變數宣告，以下元素的顏色是什么？
<p>我是p</p>
<div>我是div1
<div id='child1'>我是div1的兒子</div>
</div>
<div id="child2">
我是div2
<p>我是div2的兒子</p>
</div>
第一段將是blue，選擇器--color上沒有設定直接定義p，因此它繼承了值:root
第一個div將是green，這很清楚，div { --color: green;}
第一個div的p將是green,繼承自div1.
該div用的child2將不會是綠色的，這將是red，#child2 {--color: red;}
第一個div的p將是red,繼承自div2.
JS操作
修改:root的變數
document.body.style.setProperty('--color', '#7F583F');
document.body.style.getPropertyValue('--color').trim();
document.body.style.removeProperty('--color');
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/467029.html
標籤：Html/Css