时间:2021-05-08
详情(MDN) IE无效,其余主流浏览器有效
只能在{}内声明,作用范围由{}的选择器决定
<!-- 声明 -->body{ --name:value;//body内有效}<!-- 使用 -->.test{ attr: var(--name,defaultValue) //当--name不存在时,使用defaultValue var(--name):#369;//错误使用方式}CSS中原生的变量定义语法是:–*,变量使用语法是:var(–*),其中*表示我们的变量名称。
但是,不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文。
这个方法并不是能直接改变scsss变量的值,但是能做到一样的效果,对于需要一个变量控制多个属性的更为有效简洁
单变量控制单条属性的就没必要用了,这方法就是修改style属性而已,单对单和你之间在style写那条属性是一样的
原理(English)
简单来说就是将scss的变量交由css变量控制
$colors: ( primary: #FFBB00, secondary: #0969A2);Selector1{ @each $name, $color in $colors { --color-#{$name}: $color; }}<!-- Selector1的生成效果 -->:root { --color-primary: #FFBB00; --color-secondary: #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.setProperty(name,value);//name为css变量名 e.g: --color-primary至此完成了scss的运行时改变变量值,具体运用情景我也不太清楚,只是我遇到了。
自定义组件需要暴露出一些样式属性给使用者 自由调整 ,类似主题,而我又不想用字符串拼接的方式去完成,太浪费了,每次改完一个值都得把整个style给重写一遍,而且这涉及到了频繁修改dom不符合vue的思想,而且直接用css写太繁琐了。
所以我采用scss来写样式,scss嵌套真好用,less的不支持属性再嵌套,用得很不爽,没scss简洁。
由于scss是预编译的,无法在运行时改变变量值,而我又需要去改变,所以去google了,得到一个满意的解决方案 -> 原理(English)
在单文件组件(.vue)中若是使用了scoped 那么:root、:body等选择器的效果并不会如同你所预期的
[data-v-1374924e]:root { --test:100px;}像这种的,变量–test 根本找不到,理由是并没有这个root,vue组件scoped的特性,只在本组件有效,但组件又没有完整的document,即组件内部没有root
所以在vue文件中,仔细思考css变量声明的选择器范围,避免变量无效
到此这篇关于详解利用css3的var()实现运行时改变scss的变量值的文章就介绍到这了,更多相关css3改变scss的变量值内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
var,dynamic的区别var是静态类型,是在编译时决定的变量类型,编译器和运行时知道var声明的变量的类型,var仅仅是一个语法糖,说得更直白一些的话
具体归纳如下:(1)reinterpret_cast该函数将一个类型的指针转换为另一个类型的指针.这种转换不用修改指针变量值存放格式(不改变指针变量值),只需在
java中的switchcase语句switch-case语句格式如下:switch(变量){case变量值1://;break;case变量值2://...;
php传值:在函数范围内,改变变量值得大小,都不会影响到函数外边的变量值。PHP传引用:在函数范围内,对值的任何改变,在函数外部也有所体现,因为传引用传的是内存
TensorFlow修改变量值后,需要重新赋值,assign用起来有点小技巧,就是需要需要弄个操作子,运行一下。下面这么用是不行的importtensorflo