vue中css变量的使用

已于 2023-03-16 17:53:55 修改
阅读量5.9k 收藏 7
点赞数 2
分类专栏： css vue 文章标签： css vue.js javascript
于 2022-12-07 14:58:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53474595/article/details/128220347
版权

1、在css中使用变量

1、css中声明变量

--color：red

2、使用变量

color:var(--color)   //color:red获取到全局声明变量值为red

2、使用vue中的变量


（1）、在htm标签中

<span :style="{'--color':变量color}" ref='devcolor' />

data中声明变量color

data(){

retrun {

color:red}}

或者使用this.$refs.devcolor.style.setProperty('--color',this.color)

（2）、css中使用color变量

color:var(--color)  //使用变量color：red

示例如下：

c8e70436729545a9a5ead9ba9854852f.png
 

f75780ef77254a3ea802d096256cd744.png 

 

 

Vue自定义CSS变量的使用方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-23 2321
基本概念与作用为什么使用 CSS 变量？示例一：基本使用示例二：在组件内部定义变量示例三：动态设置变量示例四：通过 JavaScript 设置变量示例五：使用预处理器实际开发中的使用技巧随着前端技术的发展，CSS 变量（也称为 CSS 定制属性）成为了现代 Web 开发中不可或缺的一部分。CSS 变量允许开发者定义可重用的样式值，从而简化样式的管理和维护过程。在 Vue.js 应用程序中，使用 CSS 变量不仅可以增强样式的灵活性，还能提高开发效率。
Vue项目在样式文件中使用js里定义的变量
前端随记 成长型 一起加油
11-28 817
Vue项目在样式文件中使用js里定义的变量
使用css变量实现更改字体大小功能（vue3为例）
记录美好生活
03-07 571
使用css变量实现更改字体大小功能
vue使用CSS 变量
时光清浅处，一步一安然
08-04 6159
在我们知道什么是CSS变量之后，我们尝试把它在项目中运用起来，一些需要动态计算的值，我们就可以使用它快速的实现效果。以下为示例二，有的时候，一些属性我们可能需要根据一些条件计算得来，那么也能很好的去使用它。首先，我们要先知道什么是CSS变量，可以先看这篇。就能根据传入的值达到对应的效果呢？中书写的，那么如何不使用。......
前端Vue日常工作中--CSS变量
梨子社区
01-30 1846
在模板中，我们使用了Vue的动态绑定 :style="{ '--main-color': mainColor }"，将mainColor数据属性的值传递给CSS变量 --main-color，从而动态改变主要颜色。在样式中，我们使用了CSS变量 --main-color 来定义背景颜色、文本颜色和按钮的背景颜色。--main-color 变量用于定义主要颜色，然后在 body 的背景和 h1 的颜色中使用这个变量。', // 初始化文本。body 元素的背景颜色就会应用 --main-color 的值。
Css中使用Vue的变量
FellAsleep的博客
05-11 3993
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。变量名大小写敏感，–header-color和–Header-Color是两个不同变量。应用场景:(Vue一键换肤 – 修改 tagsView 动态选中样式)声明css变量的时候，变量名前面要加两根连词线（–）。第二个参数不处理内部的逗号或空格，都视作参数的一部分。var()函数用于读取变量。
vue中css使用变量
热门推荐
aleluye的博客
11-09 1万+
1、在css中使用变量 1、css中声明变量 --color：red 2、使用变量 color:var(--color) //color:red获取到全局声明变量值为red 2、使用vue中的变量 1、再htm标签中 <span :style="{'--color':变量}" ref='devcolor'/> 或者使用this.$refs.devcolor.style.setProperty('--color',this.color) 2、css中使用color变量 c...
css使用vue变量_css中使用vue3当中的变量
m0_60666452的博客
04-11 719
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
vue 中使用 css 变量
https://github.com/QAQDFAFD
03-13 507
【代码】vue 中使用 css 变量。
vue使用css变量
qq_43505774的博客
02-01 880
// html 模板 template <span class="red" :style="styleVar" @click="add">as</span> // js data() { return { styleVar: { "--colorBlue": "blue", "--colorRed": "red", "--fontSize": "30px", "--fontSizeTest":
vue如何在css样式种使用data中的变量
wu_yans的博客
02-18 2446
vue中实现了在样式里使用js变量的方法，及通过css定义变量的方式，将变量在行内注入，然后在style中使用var()获取我们在行内设置的数据即可。
在vue 的css 中使用变量
qq_35856778的博客
11-23 435
【代码】在vue 的css 中使用变量。
vue中在css中使用变量
FUSHENGRUOMENG111的博客
09-01 2328
使用情景：封装了一个自定义头部，但是每页的头部颜色不同，所以需要根据传入的颜色变量动态修改底色 以下是代码： <template> <van-nav-bar class="nav-bar-header" ref="UI" :title="title" left-text="" left-arrow fixed placeholder @click-left="onClickLeft" :class...
vue项目中使用scss变量
weixin_74177478的博客
10-21 814
在vite.config.js 配置文件中引入定义样式变量的scss 文件。之后就可以在 variable.scss 中定义变量了。main.js 中引入 该scss文件。创建一个scss文件。
09、用数据变量等控制 vue 项目标签中 CSS 样式的五种方法
狮子座的男孩
03-15 3046
通过 Vue3 的数据变量来控制 h1 标签样式; 通过 vue3 的 computed 来控制 h1 标签样式; 通过 vue3 的 computed 传值来控制 h1 标签样式; 通过 vue3 的 computed 及数据变量来控制 h1 标签样式; 通过 item 是否存在某个值来确定标签的类名;
vue3和vue2 使用css变量的方法（附带scss的使用方式）
柑橘乌云_
05-06 1万+
通过内联样式写css变量（可以调用js里面的变量），如何在style标签里面就可以使用css变量。这么写在 scss 是会编译报错的。建议写成第二种这种计算属性的方式，当值发生改变，也可以响应变化。直接在style标签里面使用v-bind绑定js里面的变量。会将双引号自动去掉，从而得到。，解决了编译失败的问题。
vue3在scss中使用JavaScript定义的变量
qq_42750608的博客
09-22 1749
vue3在scss中使用JavaScript定义的变量
在vue中使用css变量
Billow_lamb的博客
03-03 576
在vue中使用css变量 <span @click="addBtnClick" :style="styleVar" class="red">点击</span> data(){ return { styleVar: { "--colorBlue": "blue", "--colorRed": "red", "--fontSize": "30px", "--fontSizeTest": "30px", },
vue全局css变量
最新发布
03-30
### 如何在 Vue 中设置和使用全局 CSS 变量 #### 配置全局 CSS 变量 为了使全局 CSS 变量能够在整个 Vue 项目中生效，可以通过多种方式实现。以下是几种常见的方法： 1. **通过 `:root` 定义全局变量** 在项目的入口文件（如 `index.html` 或 `main.css`）中定义全局 CSS 变量： ```css :root { --primary-color: #007bff; --secondary-color: #6c757d; } ``` 这种方式适用于简单的项目结构，可以直接在整个应用中访问这些变量。 2. **Vite/Vue CLI 的配置** 如果使用 Vite 构建工具，则可以按照如下方式进行配置[^4]： ```javascript import { defineConfig } from 'vite'; export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: '@import "./src/styles/common.scss";', }, }, }, }); ``` 上述代码会在每个 SCSS 文件编译时自动注入指定的全局样式文件 `common.scss`，从而使得其中定义的变量成为全局可用。 3. **动态修改全局变量** 使用 JavaScript 动态调整全局 CSS 变量的值也是可行的。例如，在某个事件触发后更改主题颜色： ```javascript document.documentElement.style.setProperty('--themeColor', '#ff5722'); ``` 此外，还可以结合 Vue 组件的状态管理来控制变量的变化[^3]。 #### 使用全局 CSS 变量 一旦设置了全局 CSS 变量，就可以轻松地在任意组件内部调用它们。下面是一个具体的例子展示如何利用这些变量设计页面布局： ```html <template> <div class="container"> <h1 :style="{ color: getPrimaryColor }">Hello World</h1> <p>Paragraph with secondary color.</p> </div> </template> <script> export default { computed: { getPrimaryColor() { return window.getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); }, }, }; </script> <style lang="scss"> .container { background-color: var(--primary-color); } p { color: var(--secondary-color); } </style> ``` 上述模板不仅展示了静态样式的运用，还体现了借助计算属性获取当前 CSS 变量的实际数值的能力。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值