CSS原生變量(CSS自定義屬性)
示例地址：https://github.com/ccyinghua/Css-Variables
一、css原生變量的基礎用法
變量聲明使用兩根連詞線"--"表示變量，"$color"是屬于Sass的語法，"@color"是屬于Less的語法，為避免沖突css原生變量使用
"--"// 聲明變量
--color:#000;// 讀取變量
var(--color)注：
1、變量聲明不能包含$，[，^，(，%等字符，普通字符局限在只要是“數字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文?
2、變量的值可以是顏色、字符串、多個值的組合等
示例：
<h3>css variables基礎使用</h3>
<div class="btn_box"><button type="button" class="login_btn">登錄</button>
</div>/* css variables基礎使用 */
:root{--content1:"abc";--content2:"efg";--width:calc(100px 200px);--btn-bg:#279cff;--字體:18px;
}
.btn_box:before{content:var(--content1)' with add';display:block;line-height: 50px;
}
.btn_box:after{content:var(--content1)','var(--content2);display:block;line-height: 50px;
}
.login_btn{width:var(--width);height:50px;border-radius:30px;border:0;background: var(--btn-bg);box-shadow: 0 5px 5px rgba(39,156,255,.42);text-align: center;font-size:var(--字體);line-height: 50px;color:#fff;cursor:pointer;outline:none;
}?
二、作用域
1、變量是遵循CSS語法的優先級高低的?
Id > class > 標簽 > *2、注意并無!important這種用法；
3、如果變量所在的選擇器和使用變量的元素沒有交集,是沒有效果的。
<div>藍色</div>
<div class="divbox">綠色</div>
<div class="divbox" id="alert">紅色</div>:root { --color: blue; }
.divbox { --color: green; }
#alert { --color: red; }
div{color: var(--color);width:300px;line-height: 50px;text-align: center;
}
三、響應式
div {--color: #7F583F;--bg: #F7EFD2;
}.mediabox {color: var(--color);background: var(--bg);
}@media screen and (min-width: 768px) {body {--color: #F7EFD2;--bg: #7F583F;}
}四、注意事項
1、屬性名(例：width/height/margin....等)不可以走變量
.divbox {--side: margin-top;/* 無效 */var(--side): 20px;
}2、var()的完整的寫法是"var(<自定義屬性名> [, <默認值 ]?)",在變量的名字后面可以有一個默認值，如果引用的變量沒有定義（注意，僅限于沒有定義），則使用后面的值作為元素的屬性值
body {background:var(--bg,skyblue);
}3、如果變量值是不合法的，例如下面設置背景色background只能是色值而不能是像素，則使用背景色屬性的默認值代替。
body {--bg: 20px;background-color: #369;background-color: var(--bg, #cd0000);
}等同于
body {--bg: 20px;background-color: #369;background-color: transparent;
}4、CSS變量設置數值
(1)
h3 {--size: 30; font-size: var(--size)px;
}結果h3元素的字體大小就是本身的默認大小?
(2)
h3 {--size: 30px; font-size: var(--size);
}等于
h3 {font-size:30px;
}(3)使用CSS3 calc()計算：
h3 {--size: 30; font-size: calc(var(--size) * 1px);
}
等于
h3 {font-size:30px;
}5、如果變量值帶有單位，就不能寫成字符串。
/* 無效 */
.divbox {--size: '30px';font-size: var(--size);
}/* 有效 */
.divbox {--size: 30px;font-size: var(--size);
}6、進行calc()運算時，最好能提供默認值: calc(var(--base-line-height, 0) * 1rem)
7、不能作為媒體查詢值使用：
@media screen and (min-width: var(--desktop-breakpoint) {})8、圖片地址，如url(var(--image-url)) ，不會生效
五、兼容性處理
檢測瀏覽器是否支持CSS自定義屬性的方法。
/*css*/@supports ( (--a: 0)) {/* supported */
}@supports ( not (--a: 0)) {/* not supported */
}// Jsif (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {alert('CSS properties are supported');
} else {alert('CSS properties are NOT supported');
}六、JS操作變量
CSS 變量可以和 JS 互相交互
:root{--testMargin:75px;
}// 讀取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '75px'// 寫入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2); // '100px'// 刪除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '75px'javascript可以把任意值存入css變量，可以讀取變量的值，實現javascript與css的通信。
七、CSS variables與預處理器的不同
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文件一起使用。
4、總結
- 相較于傳統的 LESS 、SASS 等預處理器變量，CSS 變量的優點在于:
- CSS 變量的動態性，能在頁面運行時更改，而傳統預處理器變量編譯后無法更改
- CSS 變量能夠繼承，能夠組合使用，具有作用域
- 配合 Javascript 使用，可以方便的從 JS 中讀/寫
八、CSS原生變量的兼容性
https://caniuse.com/#search=css var
?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=ha2b1icb&title=CSS Variables
【Text,BytesWritable,NullWritable】)
...](http://pic.xiahunao.cn/python為什么closed_為什么python類的函數被調用兩次[關閉](Why a function of python class is called twice [closed])...)
