详解利用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绘制天猫logo实现代码
Nov 06 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python之批量创建文件的实例讲解
2018/05/10 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
java字符串格式化输出实例讲解
2021/01/06 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
什么是会话Bean
2015/05/14 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
给校长的建议书
2014/03/12 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
python获取对象信息的实例详解
2021/07/07 Python