CSS, CSS3, 網頁設計

CSS3教學-CSS3新增自訂變數屬性的功能

梅干 2016/03/28
梅問題-CSS3教學-CSS3新增自訂變數屬性的功能
  CSS3新增許多方便的屬性,像是之前與大家分享的calc,讓在CSS下也能加、減、乘、除,同時支援不同單位的運算,相當的方便,最近CSS3又新增了變數的屬性,讓在CSS中也能像平常在寫SASS或LESS一樣,將重覆的參數,直接用一個名稱代替,比方像常遇到的色碼,當今天將版型設計好後,一旦有一個區塊的色碼要修改時,那就相當的累人,得將用到的色碼,全部給替換掉,但現在有了這變數的功能後,當下回要修改色碼時,只要改一個值,立即全部的套用的色碼,就會變成新的,相當的方便,而目前除了IE外,其它瀏覽器皆支援,也可正常的運作,而這麼好用的變數功能,要如何使用呢?現在就一塊來看看吧!!

Step1
使用方法相當的簡單,只要--變數名稱,後方就是變數的值,這邊梅干分別建立了三組色彩的變數,分別為color1~clor3,這名稱可以任意設定。
梅問題-CSS3教學-CSS3新增自訂變數屬性的功能
Step2
設定好後,當要使用時,只要var()並在括弧間,加入剛所設定的變數名稱,就可將設定好的變數給套用進去啦!
梅問題-CSS3教學-CSS3新增自訂變數屬性的功能
Step3
當套用後,區塊就會變成指定的顏色,同時支援Chrome、Firefox、Safari,至於IE目前依然是不支援的。
梅問題-CSS3教學-CSS3新增自訂變數屬性的功能