详解利用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的定位页面元素
Aug 29 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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 strtok()函数的优点分析
2010/03/02 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python实现批量下载图片的方法
2015/07/08 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python中单例模式总结
2018/02/20 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
numpy 声明空数组详解
2019/12/05 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
python接入支付宝的实例操作
2020/07/20 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
会计毕业自我鉴定
2014/02/05 职场文书
作文评语集锦大全
2014/04/23 职场文书
初二学习计划书范文
2014/04/27 职场文书
新书发布会策划方案
2014/06/09 职场文书
答谢词范文
2015/01/05 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
房产公证书样本
2015/01/23 职场文书
高一语文教学反思
2016/02/16 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫