VAR ()介绍与使用
详情(MDN) IE无效,其余主流浏览器有效
var()使用
只能在{}内声明,作用范围由{}的选择器决定
<!-- 声明 -->
body{
--n am e:value;//body内有效
}
<!-- 使用 -->
. test {
attr: var(--name,defaultValue) //当--name不存在时,使用defaultValue
var(--name): # 369;//错误使用方式
}
CSS中原生的 变量定义 语法是：–*，变量使用语法是：var(–*)，其中*表示我们的 变量名 称。
但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是[数字[0-9]][字母[a-zA-Z]][下划线_]和[短横线-]这些组合，但是可以是中文，日文 或者 韩文。
运行时 改变 s CSS变量 值
这个方法并不是能直接改变scsss变量的值,但是能 做到 一样的效果,对于需要一个变量控制多个属性的更为有效简洁
单变量控制单条属性的就没必要用了,这方法就是修改style属性而已,单对单和你之间在style写那条属性是一样的
原理(English)
简单 来说就是将scss的变量交由css变量控制
$colors: (
Primary : #FFBB00,
secondary: #0969A2
);
Selector1{
@ each $name, $color in $colors {
--color-#{$name}: $color;
}
}
<!-- Selector1的生成效果 -->
:root {
--color- PR imary: #FFBB00;
--color -s econdary: #0969A2;
}
<!-- 使用方式一 直接使用css变量 -->
Selector{
color:var(--color-primary);
}
<!-- 使用方式二 利用 scss的函数,以符合scss语法 推荐 -->
@function color($color-name) {
@return var(--color-#{$color-name});
}
body {
color: color(primary); //使用
}
<!-- body生成效果 -->
body {
color: var(--color-primary); //这样就可以被js设置了
}
js设置css变量,即设置运行scss变量
domObject.style.setPro PE rty(name,value);//name为css变量名 e.g: --color-primary
至此完成了scss的运行时改变 变量值 ,具体运用情景我也不太清楚,只是我遇到了。
我的运用情景:
自定义组件 需要暴露出一些样式属性给使用者 自由 调整 ,类似主题,而我又 不想 用字符串拼接的方式去完成,太浪费了,每次改完一个值都得把整个style给重写一遍,而且这涉及到了频繁修改dom不符合vue的思想,而且直接用cs S写 太繁琐了。
所以我采用scss来写样式,scss嵌套真好用,less的不支持属性再嵌套,用得很不爽,没scss简洁。
由于scss是预编译的,无法在运行时改变变量值,而我又需要去改变,所以去 GOOGLE 了,得到一个满意的解决 方案 -> 原理(English)
特别注意
在单文件组件(.vue)中若是使用了scoped 那么:root、:body等选择器的效果并不会如同你所预期的
[data-v-1374924e]:root {
- -t est:100px;
}
像这种的,变量–test 根本找不到,理由是并没有这个root,vue组件scoped的特性,只在本组件有效,但组件又没有完整的document,即组件内部没有root
所以在vue文件中,仔细思考css 变量声明 的选择器范围,避免变量无效
到此这篇关于详解利用css3的var()实现运行时改变scss的变量值的 文章 就介绍到这了,更多相关css3改变scss的变量值内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 详解利用css3的var()实现运行时改变scss的变量值 全部内容，希望文章能够帮你解决 详解利用css3的var()实现运行时改变scss的变量值 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于详解利用css3的var()实现运行时改变scss的变量值的详细内容...