詳解利用css3的var()實(shí)現(xiàn)運(yùn)行時(shí)改變scss的變量值

var()介紹與使用
詳情(MDN) IE無效,其余主流瀏覽器有效
var()使用
只能在{}內(nèi)聲明,作用范圍由{}的選擇器決定
<!-- 聲明 --> body{ --name:value;//body內(nèi)有效 } <!-- 使用 --> .test{ attr: var(--name,defaultValue) //當(dāng)--name不存在時(shí),使用defaultValue var(--name):#369;//錯(cuò)誤使用方式 }
CSS中原生的變量定義語法是:–*,變量使用語法是:var(–*),其中*表示我們的變量名稱。
但是,不能包含$,[,^,(,%等字符,普通字符局限在只要是“數(shù)字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合,但是可以是中文,日文或者韓文。
運(yùn)行時(shí)改變scss變量值
這個(gè)方法并不是能直接改變scsss變量的值,但是能做到一樣的效果,對于需要一個(gè)變量控制多個(gè)屬性的更為有效簡潔
單變量控制單條屬性的就沒必要用了,這方法就是修改style屬性而已,單對單和你之間在style寫那條屬性是一樣的
簡單來說就是將scss的變量交由css變量控制
$colors: ( primary: #FFBB00, secondary: #0969A2 ); Selector1{ @each $name, $color in $colors { --color-#{$name}: $color; } } <!-- Selector1的生成效果 --> :root { --color-primary: #FFBB00; --color-secondary: #0969A2; } <!-- 使用方式一 直接使用css變量 --> Selector{ color:var(--color-primary); } <!-- 使用方式二 利用scss的函數(shù),以符合scss語法 推薦 --> @function color($color-name) { @return var(--color-#{$color-name}); } body { color: color(primary); //使用 } <!-- body生成效果 --> body { color: var(--color-primary); //這樣就可以被js設(shè)置了 }
js設(shè)置css變量,即設(shè)置運(yùn)行scss變量
domObject.style.setProperty(name,value);//name為css變量名 e.g: --color-primary
至此完成了scss的運(yùn)行時(shí)改變變量值,具體運(yùn)用情景我也不太清楚,只是我遇到了。
我的運(yùn)用情景:
自定義組件需要暴露出一些樣式屬性給使用者 自由調(diào)整 ,類似主題,而我又不想用字符串拼接的方式去完成,太浪費(fèi)了,每次改完一個(gè)值都得把整個(gè)style給重寫一遍,而且這涉及到了頻繁修改dom不符合vue的思想,而且直接用css寫太繁瑣了。
所以我采用scss來寫樣式,scss嵌套真好用,less的不支持屬性再嵌套,用得很不爽,沒scss簡潔。
由于scss是預(yù)編譯的,無法在運(yùn)行時(shí)改變變量值,而我又需要去改變,所以去google了,得到一個(gè)滿意的解決方案 -> 原理(English)
特別注意
在單文件組件(.vue)中若是使用了scoped 那么:root、:body等選擇器的效果并不會(huì)如同你所預(yù)期的
[data-v-1374924e]:root { --test:100px; }
像這種的,變量–test 根本找不到,理由是并沒有這個(gè)root,vue組件scoped的特性,只在本組件有效,但組件又沒有完整的document,即組件內(nèi)部沒有root
所以在vue文件中,仔細(xì)思考css變量聲明的選擇器范圍,避免變量無效
到此這篇關(guān)于詳解利用css3的var()實(shí)現(xiàn)運(yùn)行時(shí)改變scss的變量值的文章就介紹到這了,更多相關(guān)css3改變scss的變量值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了uni-app中使用scss的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2019-11-04
scss使用mixin不生效(瀏覽器無法編譯出來)的解決方法
這篇文章主要介紹了scss使用mixin不生效(瀏覽器無法編譯出來)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下2019-10-12- 這篇文章主要介紹了手機(jī)端用rem+scss做適配的詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-15
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21- 這篇文章主要介紹了CSS3 真的會(huì)替代 SCSS 嗎的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-09