css中使用vue的變量用--（兩個(gè)減號(hào)）扯夭，瀏覽器會(huì)當(dāng)作變量來處理
兼容性：
image.png
--hover-color: #fdb122; //定義變量
border-color:var(--hover-color); //使用css內(nèi)置函數(shù)var
與JS中聲明變量作比較：
var color = 'red' 就等同于css中 --color:red;
在vue的<style>中使用<script>中的變量時(shí)鳍贾，要確保該變量已經(jīng)在data中定義
data () {
return {
selfColor:'#fdb122'
}
}
<style lang="less">
body {
--color: red;
}
h1 {
color: var(--color); /** 這里獲取到的是全局聲明的變量，值為red **/
}
div {
--color: blue;
color: var(--color); /** 這里獲取到的是局部聲明的變量交洗，值為blue **/
}
</style>
