js修改stylus变量
使⽤变量
⼀些基本操作：
使⽤ $ 作为变量名前缀
赋值号（=）赋值
使⽤ @ 可以直接引⽤当前类下的属性名
width 10px
height @width
可以直接在类中使⽤变量名（好像是废话）
修改变量
如果想动态修改，需要⽤到 js，但是 js ⽆法修改 stylus 的变量，只能借助 css 的变量名体系。
标准的⽅式：
在 :root 中声明默认变量属性
通过 js 动态修改全局的 css 变量
具体内容可以看⽂档 。
css 的变量使⽤ -- 作为起始，使⽤的时候需要使⽤ var() 函数包裹。
需要注意的是，css 变量在 stylus 的⼀些内置函数中是⽆效的，所以有些值需要在 js 中变换完成之后再赋值给 css 变量。
以修改头部⾼度和背景颜⾊为例：
1、定义初始属性：
css变量:root
--header-height 40px
--header-bg-color #123
.header-style
height var(--header-height)
background-color var(--header-bg-color)
2、使⽤ js 进⾏修改：
document.documentElement.style.setProperty("--header-height","50px");
document.documentElement.style.setProperty("--header-bg-color","#456");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。