當網頁專案的內容多起來的時候，如果還是只會一個區塊一個區塊作樣式，在後續維護和修改時，會造成巨大的麻煩，要嘛沒改到、要嘛一直辨識這個選擇器是在改哪個部位，但如果學會CSS變數的用法，會一下子減輕很多工作量!
不僅能改一換百，還可以把之前修改的時間拿來做更多測試，並且是原生CSS的變數，不用套件不用框架，多方便阿~~~
CSS變數寫法，先宣告變數的名稱與數值，要使用時在變數名稱外層加上var()就OK囉!
變數名稱開頭一定要加– 才會視作是在定義變數喔!
定義區域{ --名稱: 值;}
使用區域{屬性: var(--名稱),替代值} *全域變數-宣告在:root
:root{ --mainColor: #fffcaf;}
h1{ color : var( --mainColor , #000 ); }
//如果--mainColor可運作則:
== h1{color: #fffcaf ; }
//如果--mainColor不可運作則:
== h1{color: #000 ; }
*區域變數 : 宣告在特定區塊，僅區塊內可作用
section{ --color: #ffffff; color: var(--color);}
section p{color : var(--color);}有了變數來整合常用數值，就不需要每次都要去複製色碼或記這個標題字要多大、行距要多高，而且一但有需要調整，就只要改變數的值就好了，不需要一行一行去找有哪幾個區塊用到，眼睛看到脫窗還會少改….
像這樣:
:root{
--mainColor: #fffcaf ; //設計不滿意主色? 沒關係 隨便你改幾次都可以!
--p-size: 24px; //老闆說老花看不見? 沒關係 變大變小一次完成!
}
nav{ border-color: var(--mainColor); }
h2{ color : var( --mainColor ); }
p{ font-size: var(--p-size) ; background-color : var( --mainColor ); }
...以此類推超方便的吧!!
RWD也可以超快完成!! 只要複寫變數的值蓋過就好:
@media screen and (max-width:768px){
:root{
--p-size: 16px;
--p-color: #dadada;
}
}差不多就結束了! 你學會了! (咦)
為了避免一些疑惑的產生，我來做一些補充:
關於變數宣告的位置，同個區塊若宣告兩次同名的變數，會依據最後一個宣告的值為準喔!
即使你把變數宣告在屬性後也一樣!
.wrap{
color: var(--wrap-color,#000);//放宣告變數前面還是吃的到值
--wrap-color:#a298c7;
}
.wrap{
background: var(--wrap-color);//吃的是最後宣告的值
--wrap-color:#726cbe; //沒用，會被下個同名蓋過去
--wrap-color:#6cbe9f; //以這個值為準
}如果這時.wrap裡的p也宣告了同名變數的話，p本身與子元素吃的是p裡的變數的值喔!
p{
--main-color:#ffffff; //變成區域變數，也不影響同文件裡同名的全域變數
color: var(--main-color);
}我有寫範例放在codepen：https://codepen.io/yukiyin/pen/jOwPEPM
實際看完整程式碼可以加深理解!
另外，變數的替代值，也有人稱預設值，但mozilla是稱fallback value而不是default，因為如果瀏覽器(例如某E)不支持CSS變數時，fallback value是不起作用的喔! 這時就會吃回網頁的預設值(通常是#000)。
詳細解說可參考： https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
使用方式：因為root也包含在css裡，所以用js選取root去修改就可以了!
let root = document.documentElement; //選取root
root.style.setProperty('--main-color' , 'red'); //將變數--main-color的值設為red還可以加上去玩
可以看這個codepen範例：https://codepen.io/Wcc723/pen/xxbwXZQ
以上，即使是CSS新手也能使用原生的變數設定來優化樣式的寫法~~~
This website uses cookies.