css / scss 样式变量

一、区别

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>
相关推荐
Glommer18 分钟前
某易易盾验证码处理思路(下)
javascript·逆向
砺能24 分钟前
window.postMessage与window.dispatchEvent
前端·javascript
雪中何以赠君别26 分钟前
【框架】CLI 工具笔记
javascript·node.js
th73930 分钟前
Symbol的11个内置符号的使用场景
javascript
古夕39 分钟前
基于 Vue 3 + Monorepo + 微前端的中后台前端项目框架全景解析
前端·javascript·vue.js
JustNow_Man42 分钟前
【Cline】插件中clinerules的实现逻辑分析
开发语言·前端·javascript
天***88961 小时前
Chrome离线版下载版,Chrome离线版安装文件,Chrome离线包
前端·chrome
呼叫69451 小时前
requestAnimationFrame 深度解析
前端·javascript
前端_逍遥生1 小时前
第一次使用 styled-components
前端
Bigger1 小时前
🚀 真正实用的前端算法技巧:从 semver-compare 到智能版本排序
前端·javascript·算法