当前位置：首页 > news >正文

js修改scss变量

news 2026/2/6 11:05:16

style.scss

$color : var(--color,'#ccc');
// 默认值 #ccc
.color{background: $color;
}

定义了一个scss变量（$color），用普通的css变量（--color）给他赋值，这里需要一个默认值，此时css变量(--color)还没有定义，接下来只有通过js修改css变量（--color），那么scss变量（$color）就会改变，但是要注意，scss变量（$color）是全局生效的，也就是说不管是在哪里修改了scss变量（$color），全局的scss变量（$color）都会变化，（这个效果常用来修改全局的主题）

修改实现流程： js--->css--->scss

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js修改scss变量</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="color"></div><button onclick="changeColor()">修改scss变量</button>
</body>
<script>function changeColor(){if(document.body.style.getPropertyValue('--color')!='red'){console.log(document.body.style.getPropertyValue('--color'));document.body.style.setProperty('--color', 'red');}else{console.log(document.body.style.getPropertyValue('--color'));document.body.style.setProperty('--color', 'gray');}}
</script>
</html>

代码很简单，主要是在body修改css变量（--color） 因为页面中body的所有子元素会自动继承css变量（--color），这样即使有多个元素都会引起变化

这里点击一次按钮，div的颜色就变化一次

js修改scss变量

相关文章：

js修改scss变量

【中霖教育怎么样】报考注册会计师有年龄限制吗?

PHP验证日本手机电话号码

Qt 配置ASan

MySQL常用操作命令大全

有人物联的串口服务器USR-TCP232-410S基本测试通信和使用方案（485串口和232串口）

二维码登录的原理

归并排序详解（递归与非递归）

计算机系统基础（二）

vue根据文字长短展示跑马灯效果

leetcode-21-回溯-全排列及其去重

如何根据两个关键字查询报错日志的位置

短视频预算表：成都柏煜文化传媒有限公司

【Llama 2的使用方法】

mysql-sql-第十三周

【Android】ViewPage2嵌套Fragment+SeekBar横向滑动冲突

【408考点之数据结构】图的遍历

自动驾驶---Motion Planning之多段五次多项式

Linux基础IO操作详解

轻松掌握：Hubstudio指纹浏览器如何接入IPXProxy代理IP

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

服务器硬防的应用场景都有哪些？

vue3 字体颜色设置的多种方式

OkHttp 中实现断点续传 demo

linux 错误码总结

srs linux

Cinnamon修改面板小工具图标

C++.OpenGL （10/64）基础光照（Basic Lighting）

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

Caliper 配置文件解析：config.yaml