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

js修改scss变量

news 2025/9/15 21:55: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变量

style.scss $color : var(--color,#ccc); // 默认值 #ccc .color{background: $color; } 定义了一个scss变量&#xff08;$color&#xff09;&#xff0c;用普通的css变量&#xff08;--color&#xff09;给他赋值&#xff0c;这里需要一个默认值&#xff0c;此时css变量(--co…...

编程日记 2024/7/2 16:15:36

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

【中霖教育怎么样】报考注册会计师有年龄限制吗? 申请参加注册会计师考试有没有年龄约束? 对于注册会计师的考试&#xff0c;不存在具体的年龄上限。而且该考试的入学门栏相对低&#xff0c;主要对考生的年龄下限规定。 在专业阶段&#xff0c;注册会计师考试要求考生具备…...

编程日记 2024/7/2 16:14:35

PHP验证日本手机电话号码

首先&#xff0c;您需要了解手机号码的规格。 根据 &#xff0c;手机和PHS&#xff08;个人手持电话系统&#xff09;可以理解为以“070”、“080”和“090”开头的11位数字。 此外&#xff0c;以“050”开头的11位特定IP电话号码也将包含在该目标中。 关于以“060”开头的F…...

编程日记 2024/7/2 16:13:33

Qt 配置ASan

Qt 配置ASan 文章目录 Qt 配置ASan摘要关于ASan&#xff08;AddressSanitizer&#xff09;在Qt中配置 ASan1. 安装必要的工具2. 修改项目的 .pro 文件3. 重新构建项目4. 运行应用程序5. 分析错误报告示例注意事项 关键字&#xff1a; Qt、 ASan、 AddressSanitizer 、 GCC …...

编程日记 2024/7/2 16:12:31

MySQL常用操作命令大全

文章目录 一、连接与断开数据库1.1 连接数据库1.2 选择数据库1.3 断开数据库 二、数据库操作2.1 创建数据库2.2 查看数据库列表2.3 删除数据库 三、表操作3.1 创建表3.2 查看表结构3.3 修改表结构3.3.1 添加列3.3.2 删除列3.3.3 修改列数据类型 3.4 删除表 四、数据操作4.1 插入…...

编程日记 2024/7/2 16:10:29

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

1.将 410S(USR-TCP232-410S&#xff0c;简称 410S 下同)的串口通过串口线(或USB 转串口线)与计算机相连接&#xff0c;通过网线将 410S 的网口 PC 的网口相连接&#xff0c;检测硬件连接无错误后&#xff0c;接入我们配送的电源适配器&#xff0c;给 410S 供电。观察指示灯状态…...

编程日记 2024/7/2 16:08:26

二维码登录的原理

二维码登录的原理： 二维码登录是一种基于移动设备和网络技术的便捷登录方式。其原理主要依赖于以下几个关键要素： 随机生成：服务器端随机生成一个具有唯一性和时效性的二维码。编码信息：这个二维码包含了特定的登录信息，例如用户标识、会话标识、时间戳等。扫描识别：用户…...

编程日记 2024/7/2 16:07:24

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

归并排序是建立在归并操作上的一种有效算法。该算法是采用分治法的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有序&#xff0c;再使子序列间断有序。若将两个有序表合并成一个有序表&#xff0c;成为二路归并。 一…...

编程日记 2024/7/2 16:05:20

计算机系统基础（二）

1.数值数据的表示 为什么采用二进制&#xff1f; 二进制只有两种基本状态&#xff0c;两个物理器件就可以表示0和1二进制的编码、技术、运算规则都很简单0和1与逻辑命题的真假对应&#xff0c;方便通过逻辑门电路实现算术运算 数值数据表示的三要素 进位记数制&#xff08;十…...

编程日记 2024/7/2 16:04:19

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

介绍 为大家介绍一个我编写的vue组件 auto-marquee &#xff0c;他可以根据要展示文本是否超出展示区域&#xff0c;来判断是否使用跑马灯效果&#xff0c;效果图如下所示 假设要展示区域的宽度为500px&#xff0c;当要展示文本的长度小于500px时&#xff0c;只会展示文本&…...

编程日记 2024/7/2 16:02:16

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

一、[46]全排列 给定一个 没有重复 数字的序列&#xff0c;返回其所有可能的全排列。 示例: 输入: [1,2,3]输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] ] 其中&#xff0c;不需要使用startIndex used数组&#xff0c;其实就是记录此时path里都有哪些元素…...

编程日记 2024/7/2 16:01:15

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

1、查找两个关键字&#xff08;无顺序要求&#xff09; 如果你不关心这两个关键字出现的顺序&#xff0c;你可以使用egrep&#xff08;等同于grep -E&#xff09;或grep的-E选项来启用扩展正则表达式&#xff0c;并使用管道&#xff08;|&#xff09;来组合两个搜索模式。 gr…...

编程日记 2024/7/2 16:00:13

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

短视频预算表&#xff1a;精打细算&#xff0c;打造高质量视觉盛宴 在数字时代&#xff0c;短视频以其独特的魅力迅速占领了互联网内容的半壁江山&#xff0c;成为品牌宣传、文化传播乃至个人表达的重要载体。然而&#xff0c;每一个成功的短视频背后&#xff0c;都离不开一份…...

编程日记 2024/7/2 15:57:09

【Llama 2的使用方法】

Llama 2是Meta AI&#xff08;Facebook的母公司Meta的AI部门&#xff09;开发并开源的大型语言模型系列之一。Llama 2是在其前身Llama模型的基础上进行改进和扩展的&#xff0c;旨在提供更强大的自然语言处理能力和更广泛的应用场景。 以下是Llama 2的一些关键特性和更新点&am…...

编程日记 2024/7/2 15:56:06

mysql-sql-第十三周

学习目标&#xff1a; sql 学习内容&#xff1a; 37.查询各科成绩最高分、最低分和平均分&#xff1a; 以如下形式显示&#xff1a;课程 ID,课程 name,最高分,最低分,平均分,及格率,中等率,优良率,优秀率 及格为>60,中等为&#xff1a;70-80,优良为&#xff1a;80-90,优秀…...

编程日记 2024/7/2 15:54:03

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

问题描述 ViewPage2嵌套FragmentSeekBar&#xff0c;拖动SeekBar的进度条时&#xff0c;触发ViewPage2的滑动。 解决方案&#xff1a; 方案一&#xff1a;通过事件总线ViewPage2的isUserInputEnabled属性 子Fragment&#xff1a; class SeekBarFragment : Fragment() {priv…...

编程日记 2024/7/2 15:53:02

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

图的遍历 图的遍历是指从图中的某个顶点出发&#xff0c;按照一定的规则访问图中所有顶点&#xff0c;并使每个顶点仅被访问一次。图的遍历包括两种主要方法&#xff1a;深度优先搜索&#xff08;DFS&#xff09;和广度优先搜索&#xff08;BFS&#xff09;。这两种遍历方法在…...

编程日记 2024/7/2 15:52:01

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

1 前言 在之前的博客系列文章中和读者朋友们聊过Apollo的 Motion Planning方案： 《自动驾驶---Motion Planning之LaneChange》 《自动驾驶---Motion Planning之Path Boundary》 《自动驾驶---Motion Planning之Speed Boundary》 《自动驾驶---Motion Planning之轨迹Path优化》…...

编程日记 2024/7/2 15:50:59

Linux基础IO操作详解

C文件IO相关接口 fopen函数 pathname: 要打开的文件名字符串mode: 访问文件的模式 模式描述含义“r”读文件不存在失败返回null“r”读写文件不存在打开失败返回null&#xff0c;文件存在则从头开始覆盖现有的数据&#xff08;不会清空数据&#xff09;“w”写文件不存在创建…...

编程日记 2024/7/2 15:49:57

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

​代理IP对于保护个人和企业网络安全起到了至关重要的作用&#xff0c;然而在需要多个工作的时候&#xff0c;就需要搭配指纹浏览器来使用。其中Hubstudio指纹浏览器就可以模拟多个浏览器环境&#xff0c;然而有些用户不知道如何将Hubstudio和代理IP一起使用&#xff0c;下面以…...

编程日记 2024/7/2 15:48:55

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/9/9 16:59:16

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/9/9 14:48:35

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/9/9 15:01:44

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/13 0:44:14

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/9/12 14:52:52

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/8/27 0:04:53

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/9/7 8:55:13

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/9/7 8:49:35

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/9/9 10:08:24