資訊專欄INFORMATION COLUMN
摘要：神秘巨星神秘巨星是誰它就是。語法語法有點(diǎn)難看但很簡單，來聲明變量名，來使用，也許你要問了，為什么使用不用一類的呢，唉，那不是兩個(gè)貨用了嗎聲明和使用必須放在代碼塊里代碼是不是很簡單，可以直接看效果，就不贅述了。
出場曲
神秘巨星來了嗎？快，打追光，快，快給她鏡頭。 ------《神秘巨星》
神秘巨星是誰？它就是CSS Variables。
簡介CSS Variables，一個(gè)并不是那么新的東西，但對css來說絕對是一場革命。
之前使用變量的時(shí)候，需要借助sass、less等預(yù)處理工具來實(shí)現(xiàn)，現(xiàn)在我們可以直接使用css來聲明變量。
兼容性老規(guī)矩，先來看下兼容性
兼容性一片綠，紅的那不是還有兩個(gè)嗎？做大事怎么能拘小節(jié)呢，讓它咕嚕（gun）一邊去吧。
語法語法有點(diǎn)難看但很簡單，--*來聲明變量名，var(--*)來使用，也許你要問了，為什么使用--不用$一類的呢，唉，那不是sass、less兩個(gè)貨用了嗎
聲明和使用必須放在{}代碼塊里
body{
--bg-color: lightblue;
background-color: var(--bg-color);
}
代碼是不是很簡單，可以直接看效果，就不贅述了。
全局變量與變量覆蓋在:root代碼塊里面聲明的變量就是全局變量，并且局部變量會(huì)覆蓋全局變量
:root{
--bg-color: red;
}
body{
--bg-color: lightblue;
background-color: var(--bg-color);
}
最后生效的是--bg-color: lightblue，bg-color變量的值也就變成了lightblue
變量的缺省值完整的變量使用語法 var( [, ]? )，當(dāng)變量沒有定義的時(shí)候，會(huì)使用后面的值?？聪旅娴睦?/p>
body{
--1: red;
color:var(--2, blue);
}
上面代碼會(huì)在body的作用域里面查找--2變量，沒有的話就會(huì)查找全局，都沒有的話就會(huì)使用后面的值，所以最后生效的顏色就是blue
可以看到，上面我們的變量名直接使用了數(shù)字
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113912.html
摘要：在本指南中，我將向你演示如何創(chuàng)建自定義標(biāo)簽欄以并與一起使用。我們將導(dǎo)入并使用創(chuàng)建默認(rèn)選項(xiàng)卡導(dǎo)航器。接下來，我們將添加實(shí)際的自定義標(biāo)簽欄組件。例如，當(dāng)前的實(shí)現(xiàn)假設(shè)選項(xiàng)卡導(dǎo)航器中總會(huì)有個(gè)，聚光燈顏色在選項(xiàng)卡欄組件中是寫死。 如果你覺得 React Navigation 默認(rèn) Tab 組件看起來太平淡，或者想創(chuàng)造一些更現(xiàn)代的東西，那么你想法就和我一樣。 在本指南中，我將向你演示如何創(chuàng)建自定義...
摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...
閱讀 1805·2021-09-22 10:02
閱讀 1974·2021-09-02 15:40
閱讀 2869·2019-08-30 15:55
閱讀 2283·2019-08-30 15:44
閱讀 3621·2019-08-30 13:18
閱讀 3250·2019-08-30 11:00
閱讀 1976·2019-08-29 16:57
閱讀 588·2019-08-29 16:41
