css / scss 样式变量

H_HX1262023-11-12 21:48

一、区别

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

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

二、css 样式变量

（1）定义和使用

css 复制代码

<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 定义的变量值

javascript 复制代码

// 值是一个通过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样式变量的定义和使用

css 复制代码

<style scoped lang='scss'>
$sub-header: #FC5531;
.header {
    color: $sub-header;
}
</style>