css / scss 样式变量

一、区别

css定义的变量，可以通过 js 修改并附值；

scss定义的变量目前还不可以通过 js 重新修改赋值；

二、css 样式变量

（1）定义和使用

（2）使用 js 修改 css 定义的变量值

// 值是一个通过js定义的变量
document.documentElement.style.setProperty('--sub-header-color', item.subColor)
document.documentElement.style.setProperty('--sub-header-size', `${item.subSize}px`)

// 值是一个普通的字符串
document.documentElement.style.setProperty('--sub-header-color', 'pink')
document.documentElement.style.setProperty('--sub-header-size', 26+'px')

三、scss样式变量的定义和使用