详解利用css3的var()实现运行时改变scss的变量值


Posted in HTML / CSS onMarch 02, 2021

var()介绍与使用

详情(MDN) IE无效,其余主流浏览器有效

var()使用

只能在{}内声明,作用范围由{}的选择器决定

<!-- 声明 -->
body{
  --name:value;//body内有效
}


<!-- 使用 -->
.test{
  attr: var(--name,defaultValue) //当--name不存在时,使用defaultValue
  
  var(--name):#369;//错误使用方式
}

CSS中原生的变量定义语法是:–*,变量使用语法是:var(–*),其中*表示我们的变量名称。

但是,不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文。

运行时改变scss变量值

这个方法并不是能直接改变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的变量值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 #HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 #HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 #HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 #HTML / CSS
CSS3选择器新增问题的实现
Jan 21 #HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 #HTML / CSS
You might like
PHP四种基本排序算法示例
2015/04/09 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
关于jquery css的使用介绍
2013/04/18 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
Python实现多行注释的另类方法
2014/08/22 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python continue继续循环用法总结
2018/06/10 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
VC++笔试题
2014/10/13 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
自我鉴定思想方面
2013/10/07 职场文书
内衣营销方案
2014/03/15 职场文书
三好学生竞选稿
2015/11/21 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB