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

网页制作 2024/11/17 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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,var(),scss变量值

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

暂无详解利用css3的var()实现运行时改变scss的变量值的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

var()介绍与使用

var()使用

运行时改变scss变量值

我的运用情景:

特别注意

css3,var(),scss变量值

css animation配合SVG制作能量流动效果

css圆形镂空(优惠券背景图)的实现

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接