var()介紹與使用

詳情(MDN) IE無效,其余主流瀏覽器有效

var()使用

只能在{}內聲明,作用范圍由{}的選擇器決定

<!-- 聲明 -->
body{
  --name:value;//body內有效
}


<!-- 使用 -->
.test{
  attr: var(--name,defaultValue) //當--name不存在時,使用defaultValue
  
  var(--name):#369;//錯誤使用方式
}

CSS中原生的變量定義語法是：–*，變量使用語法是：var(–*)，其中*表示我們的變量名稱。

但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“數字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文。

運行時改變scss變量值

這個方法并不是能直接改變scsss變量的值,但是能做到一樣的效果,對于需要一個變量控制多個屬性的更為有效簡潔
單變量控制單條屬性的就沒必要用了,這方法就是修改style屬性而已,單對單和你之間在style寫那條屬性是一樣的

原理(English)

簡單來說就是將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的函數,以符合scss語法 推薦 -->  
@function color($color-name) {
  @return var(--color-#{$color-name});
}

body { 
  color: color(primary); //使用
}

<!-- body生成效果 -->
body { 
  color: var(--color-primary); //這樣就可以被js設置了
}

js設置css變量,即設置運行scss變量

domObject.style.setProperty(name,value);//name為css變量名 e.g: --color-primary

至此完成了scss的運行時改變變量值,具體運用情景我也不太清楚,只是我遇到了。

我的運用情景:

自定義組件需要暴露出一些樣式屬性給使用者 自由調整 ,類似主題,而我又不想用字符串拼接的方式去完成,太浪費了,每次改完一個值都得把整個style給重寫一遍,而且這涉及到了頻繁修改dom不符合vue的思想,而且直接用css寫太繁瑣了。

所以我采用scss來寫樣式,scss嵌套真好用,less的不支持屬性再嵌套,用得很不爽,沒scss簡潔。
由于scss是預編譯的,無法在運行時改變變量值,而我又需要去改變,所以去google了,得到一個滿意的解決方案 -> 原理(English)

特別注意

在單文件組件(.vue)中若是使用了scoped 那么:root、:body等選擇器的效果并不會如同你所預期的

[data-v-1374924e]:root {
  --test:100px;
}

像這種的,變量–test 根本找不到,理由是并沒有這個root,vue組件scoped的特性,只在本組件有效,但組件又沒有完整的document,即組件內部沒有root

所以在vue文件中,仔細思考css變量聲明的選擇器范圍,避免變量無效

到此這篇關于詳解利用css3的var()實現運行時改變scss的變量值的文章就介紹到這了,更多相關css3改變scss的變量值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論