js修改/设置scss变量值(应用于主题设置)

最新推荐文章于 2024-06-28 10:40:32 发布
最新推荐文章于 2024-06-28 10:40:32 发布
阅读量5.6k 收藏 8
点赞数 5
分类专栏： Vue 前端 文章标签： vue.js 前端 javascript angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39157014/article/details/109715297
版权
前端 同时被 2 个专栏收录
19 篇文章 0 订阅
订阅专栏
Vue
15 篇文章 0 订阅
订阅专栏
本文介绍了一种通过JavaScript动态设置CSS变量，进而改变SCSS中定义的变量值的方法，用于实现项目的主题切换。作者提到，这种方法允许他们细致地调整包括组件背景色、字体大小和颜色在内的各种样式，并且这些样式可以被持久化保存。文章末尾，作者期望能从读者那里获取更多关于主题切换和自定义主题的优化方案。
摘要由CSDN通过智能技术生成

js修改/设置scss变量值--应用于主题设置

scss文件变量设置

// --label-font-color：为js操作此变量需要用到的KEY
// --#RED：默认css属性值
$labelFontColor: var(--label-font-color, red);

js修改scss中$labelFontColor变量值

// --label-font-color：为js操作此变量需要用到的KEY
// --#BLUE：修改后的css属性值
document.getElementsByTagName('body')[0].style.setProperty('--label-font-color', 'BLUE');

结语

目前本人正在使用该方法实现项目的主题切换，以及自定义主题，自定义主题会细粒度到组件的背景颜色、字体大小、字体颜色等，这些样式都做了持久化，如果各位大神有什么更好的方法，请分享，感谢。。

ZwLemon
关注
专栏目录
scss值列表_更改变量值scss
weixin_35834271的博客
12-23 701
I have defined different variables in my scss file, I used these variables in some scss files._variables.scss$light-theme: rgba(94,161,215,0.3);$dark-theme: #5EA1D7;$darker-theme: #57647A;$very-dark-t...
js控制scss的变量_Node.js 全局对象
weixin_31650287的博客
01-04 214
JavaScript 中有一个特殊的对象，称为全局对象（Global Object），它及其所有属性都可以在程序的任何地方访问，即全局变量。在浏览器 JavaScript 中，通常 window 是全局对象， 而 Node.js 中的全局对象是 global，所有全局变量（除了 global 本身以外）都是 global 对象的属性。在 Node.js 我们可以直接访问到 global 的属性，而...
Vue + Scss 动态切换主题颜色实现换肤
冰雪为融的博客
06-25 5558
根据预设的配色方案，在前端实现动态切换系统主题颜色。 大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。 一、首先需要给项目下载配置Scss 1.安装依赖 npm installnode-sasssass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 {..
js修改scss变量
最新发布
I_am_shy的博客
06-28 534
代码很简单，主要是在body修改。都会变化，（这个效果常用来修改全局的主题）是全局生效的，也就是说不管是在哪里修改了。因为页面中body的所有子元素会自动继承。这里点击一次按钮，div的颜色就变化一次。给他赋值，这里需要一个默认值，此时。还没有定义，接下来只有通过js修改。css变量（--color）css变量（--color），这样即使有多个元素都会引起变化。css变量（--color）scss变量（$color）就会改变，但是要注意，
js设置/修改scss中的变量值
@小蚜虫
09-29 3692
js动态修改scss变量值 1.scss文件定义变量 //--test ：为js操作此变量需要用到的KEY //red: 默认的css属性值 $textColor: var(--test, red); 2.js中更改$textColor 变量的值 //--test ：为js操作此变量需要用到的KEY //blue: 修改后的css属性值 document.getElementsByTagName('body')[0].style.setProperty('--test', 'blue'); ...
JS修改Css变量值
陆仁丶的博客
09-09 2082
【代码】JS修改Css变量值。
js控制scss的变量_web前端：js如何操作sass里的变量及calc 使用sass变量
weixin_29326909的博客
01-13 1090
Javascript最初受java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。js如何操作sass里的变量及calc使用sass变量scss文件里:root{--height-primary:240px;//--height-primary：变量名，css3有规则}$header:var(--height-primary);//用va...
项目主题切换scss变量
01-11
本项目主题切换scss变量，主要关注的是如何在SCSS中管理和切换应用的主题，以及如何通过app文件实现这一功能。 首先，SCSS变量是这个主题切换的核心。变量在SCSS中通常以`$`开头，用于存储颜色、尺寸、字体等样式...
Vue + Scss 动态切换主题颜色实现换肤的示例代码
10-15
这个过程主要通过修改HTML元素的data-theme属性值，使用Scss变量来根据不同主题应用不同的颜色方案。下面详细介绍这一实现过程所涉及的知识点： ### 1. Vue框架基础 Vue.js是一个轻量级的JavaScript框架，提供了...
Element Plus 组件库相关技术揭秘,深入理解组件库中SCSS和CSS变量的架构应用和实践
xxxzzzqqq_的博客
03-14 3406
封装、继承、多态，并且 CSS 变量的加入使用，使得多态这一特性的实现更加丝滑。整个 Element Plus 的 CSS 架构核心思想就是，首先将那些公共的UI 样式进行提取封装成公共 CSS 变量，相当于基础类，然后每个组件又基于公共的 CSS 变量进行继承封装属于每个组件独立的 CSS 变量，相当于子类。这样一旦修改基础类的 CSS 变量，所有继承基础类的组件的样式都会发生改变，这个就是使用 CSS 变量进行封装继承的好处。
详解如何在Javascript和Sass之间共享变量
10-16
主要介绍了详解如何在Javascript和Sass之间共享变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack4 处理SCSS的方法示例
10-18
它能够处理各种静态资源的打包，包括JavaScript、图片、字体等，以及预处理器如SCSS。Webpack 4相较于之前的版本，新增了许多特性，比如零配置的概念，更便捷的插件系统等。而SCSS作为当下流行的CSS预处理器，需要...
vue 自定义修改主题 sass 定义全局变量
积极废人的博客
11-22 1334
因 ：sass 平台 首页根据不同平台自定义样式 v-cli3.0 node-sass: 4.12.0, sass-loader: “^7.0.1” config 文件 配置项参考 css: { loaderOptions: { scss: { // @/ 是 src/ 的别名 // 所以这里假设你有 `src/variables.sass` 这个文件 // 注意：在 sass-loader v8 中，这个选项名是 "p
js控制scss的变量_详解如何在Javascript和Sass之间共享变量
weixin_36378347的博客
02-06 803
在环境之间共享变量是编程的圣杯。以下是在Javascript和Sass(或CSS！)之间共享变量的方法。随着大型单页应用程序的兴起，Javascript和CSS越来越交织在一起。通常在两个值之间复制值(例如，与React的CSSTransitionGroup一起使用的动画持续时间或将品牌颜色传递到图形库中)。但是，保持两个具有相同值的副本不可避免地导致仅更新一个副本并最终导致令人沮丧的错误。幸运的...
scss变量动态修改
yjl23332的博客
06-28 3372
动态修改css的变量设置的属性值
vue 在scss中使用js变量值
热门推荐
卿本无忧的博客
08-12 1万+
vue 在scss中使用js变量值 js修改scss的变量值
js 修改scss变量
Lycoris_Red的博客
08-12 4758
js 修改scss变量
js修改scss样式中定义的属性值
noeal的博客
12-06 1229
1、设置并应用主题色 // --primaryColor：为js操作此变量需要用到的KEY // '#6081c5': 默认的css属性值 <style lang="scss" scoped> $primaryColor: var(--primaryColor, '#6081c5'); .ss{ background: $primaryColor; } </style> 2、js中修改 --primaryColor 属性值 document.getElementsByTagNam
vue 如何设置全局 sass动态变量
07-13
要在Vue项目中设置全局的Sass动态变量，你可以使用Vue CLI提供的自定义主题功能。 以下是设置全局Sass动态变量的步骤： 1. 在Vue项目中安装`sass-loader`和`node-sass`（或`dart-sass`）依赖： ```bash npm install sass-loader node-sass --save-dev ``` 2. 在项目根目录下创建一个`vue.config.js`文件，如果已经存在，请跳过此步骤。 3. 在`vue.config.js`文件中，添加以下代码： ```javascript module.exports = { css: { loaderOptions: { sass: { additionalData: `@import "@/assets/variables.scss";` } } } }; ``` 这将引入一个名为`variables.scss`的Sass文件，它将包含全局的动态变量。 4. 在`src/assets`目录下创建一个`variables.scss`文件，并在其中定义你想要的全局动态变量，例如： ```scss $primary-color: #ff0000; ``` 你可以根据实际需要定义更多的变量。 5. 在Vue组件中，你可以直接使用全局的动态变量，例如： ```scss <style lang="scss"> .my-component { color: $primary-color; } </style> ``` 这样，`$primary-color`变量的值将被应用到`.my-component`样式中。 通过以上步骤，你就可以在Vue项目中设置和使用全局的Sass动态变量了。当你修改了`variables.scss`文件中的变量值时，这些变量的值将会在整个项目中得到更新。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZwLemon

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值