利用css變量實現網頁運行時scss變量值的切換

項目是采用scss進行的樣式設定，通過設定css變量名的方式可以實現網站運行時的顏色整體切換。

1. 利用css變量實現scss的變量值修改。

示例：

1.1 css變量設定

:root {
    --my-color: #999999;
}

1.2. scss變量中使用css變量的值$myColor的值

.demo{
  $myColor: var(--my-color, #888888)
}

var() 函數用於插入自定義的屬性值

• 兩個參數：property，value

  • property：必填，自定義屬性的名稱，必需以 -- 開頭
  • value：可選，備用值，在屬性不存在的時候使用

• var(--my-color, #888888)會先查找css變量--my-color，若存在則使用該變量的值，若不存在則$myColor的值會是#888888

1.3. 通過修改css變量值來動態修改scss變量的值

js中獲取與設置css變量的方法

//獲取
getComputedStyle(document.documentElement).getPropertyValue('--my-color')
//設置
document.documentElement.style.setProperty('--my-color', 'pink')