css / scss 样式变量
一、区别
css定义的变量，可以通过 js 修改并附值；
scss定义的变量目前还不可以通过 js 重新修改赋值；
二、css 样式变量
（1）定义和使用
<style>
:root {--sub-header-color: #B641FA;--sub-header-size: 3.5vh;
}
.dv-scroll-board .header {color: var(--sub-header-color);font-size: var(--sub-header-size);
}
</style>（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样式变量的定义和使用
<style scoped lang='scss'>
$sub-header: #FC5531;
.header {color: $sub-header;
}
</style>