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