微信小程序wxss使用var变量

最新推荐文章于 2025-03-13 17:47:53 发布
最新推荐文章于 2025-03-13 17:47:53 发布
阅读量8k 收藏 1
点赞数 2
文章标签： wxss var 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013727805/article/details/104271097
版权
本文分享了在使用WXSS时遇到的变量定义和注释问题的解决方案。作者最初尝试使用root选择器定义变量未成功，后改为page选择器并解决了双斜杠注释导致的样式失效问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开始用:root {}发现没有效果，后来查了下需要改成 page{} 就可以了：

page {--ion-color-:red;}

.var-color{
  color: var(--ion-color-);
}

特别注意：WXSS 内不支持 双斜杠 // 注释， 否则WXSS内会报红，定义的变量和样式会不生效！！！

【微信小程序】全局css样式
墨夶的博客
11-15 920
通过合理地设置和使用全局 WXSS 样式，可以显著提升微信小程序的样式管理和用户体验。本文介绍了如何在微信小程序中创建和配置全局 WXSS 文件、在页面中使用全局样式、覆盖全局样式以及使用 CSS 变量和 SCSS 预处理器。希望这些内容能够帮助你在开发微信小程序时更加高效和专业。如果你有任何问题或需要进一步的帮助，请随时留言交流。😊。
小程序06/ 小程序项目中wxss变量 var( )函数 、小程序项目中 dayjs 基础应用
m0_64494670的博客
01-05 2236
小程序06/ 小程序项目中wxss变量 var( )函数 、小程序项目中 dayjs 基础应用
微信小程序实现通过js操作wxml的wxss属性示例
10-17
主要介绍了微信小程序实现通过js操作wxml的wxss属性,结合实例形式分析了微信小程序使用js操作wxml的wxss属性相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
小程序里为何偏爱 var？从一段代码看 var、let 和 const 的较量！
最新发布
小丁的博客
03-13 634
小程序里为何偏爱 var？从一段代码看 var、let 和 const 的较量！
[微信小程序] WXSS 实现变量 var 函数的使用
iChangebaobao的博客
05-07 1199
微信小程序中的页面或组件中，想使用变量，可在page 中定义。
微信小程序--wxss中变量的使用
海到无边天作岸 山登绝顶我为峰
04-16 1万+
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 场景模拟 - 1 有时在某一个页面需要频繁地使用一
微信小程序——wxss高级篇讲解（before，after )(.class image)(@import)(＜view class=‘view1 view2‘ / ＞)、wxss中使用变量
wy313622821的博客
11-03 9407
大家有没有遇到这样的一种现象，在看复杂的wxss，会有很多看不懂的地方，比如： 第一种：before ，after .container_1 { width: auto; margin: 30rpx; text-align: center; } .view_1 { position: relative; display: inline-block; font-size: 70rpx; color: red; } /* 在view_1控件之前 */ .view_1::before
微信小程序wxss中--自定义属性和var用法
qq_39272523的博客
09-22 2128
在微信小程序开发中，每个小程序一般都有一个主题色，为了方便开发，我们可以在app.wxss中初始化一下，或者在app.wxss中引用一下公共的样式文件，将主题色声明一下。（前面的–是不能省略的） page{ --bg:#04bcc8 } 在需要调用的地方 .tag{ background-color: var(--bg); } ...
小程序中使用css var变量(使js可以动态设置css样式属性)
11-20
使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。 基本用法 基础用法 <!--web开发中顶层变量的...
微信小程序动态拼接变量名
qq_45963949的博客
02-19 3356
众所周知，微信小程序因为安全问题不能使用eval()函数，所以不能使用eval()来动态的拼接变量名。 但可以使用ES6的字符串模板来直接拼接，直接看代码 let obj = { obj1 :{ say:'hi1' }, obj2 :{ say:'hi2' } } let one = obj1 let two = say // 等于 obj.obj1.say // `` 是ESC下 TAB上的哪
微信小程序获取用户信息js包，WXBizDataCrypt.js下载
12-20
在微信小程序中，开发者可以利用JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）进行开发。本话题聚焦于微信小程序中的用户信息获取和加密处理，特别是`WXBizDataCrypt.js`这个关键的...
微信小程序 WXSS 实现变量 var 函数的使用
Bi-Hu的博客
09-19 933
less 不用说 那些功能都有 wxss 和 css 也是支持变量的 ， 因为 page 是小程序的根节点(WEB是root)，所以这里我们需要在page中声明，然后在指定页面使用即可： app.wxss:(全局WXSS) 如果你要用 ，那么直接就用 var 即可： 就这样 ...
微信小程序中如何使用setData修改数组或对象中的某一参数
热门推荐
u014570569的博客
08-07 2万+
本人也是刚开始接触微信小程序，在微信小程序中经常会遇到修改数组中某一项的值，比如array[0]或者是对象中object.item的值。这些值在微信小程序中都需要使用一个名为setData的方法，而这个方法是通过键值对的形式对数据进行修改，setData({ 参数名: 值 }); 既然知道是以键值对的方式进行传参，那么我们在修改数组和对象的时候就直接将要修改的参数名写成对应字符串就可以了，然后使
【微信小程序】-通过变量设置样式
weixin_41815063的博客
09-27 224
* 正数 *//* 负数*//*0*/
微信小程序详解(6.WXS语法:变量,注释,运算符,语句,数据类型,基础类库)
a2690656046的博客
06-28 1854
介绍 wxs中也是有变量存在的,因为我们也要做各种各样应用和引入,因此变量的存在是必须的,那么什么是WXS变量呢? WXS 中的变量均为值的引用。 没有声明的变量直接赋值使用，会被定义为全局变量。 如果只声明变量而不赋值，则默认值为 undefined。 var表现与javascript一致，会有变量提升。 流程 1.变量名 变量命名必须符合下面两个规则： 首字符必须是：字母（a-zA-Z），下划线（） 剩余字符可以是：字母（a-zA-Z），下划线（）， 数字（0-9） 保留标识符 以下标识符不能作为变量名
微信小程序 定义全局的变量样式
小火车况且况且况且的博客
04-10 2952
微信小程序 定义全局的变量样式 1. 首先定义一个变量 page { --themeColor: #ff5033; } 2. 调用 view { color: var(--themeColor) }
微信小程序Ⅷ [WXSS 小知识积累]
u011415782的专栏
05-25 1317
微信小程序，作为一个前端为主的语言，涉及到的页面布局自然跟 HTML、CSS 有很大的耦合性，此处作为日常的小知识积累 ①. CSS3 Filter的十种特效 通常来讲：Filters主要是运用在图片上，以实现一些特效，使用这些简单的属性设置可以达到很好的视觉体验...
微信小程序css变量全局引用
wyl0110的博客
06-21 559
【代码】微信小程序css变量全局引用。
小程序css样式变量/api promise化
qq_48349120的博客
09-02 1250
全局样式变量
微信小程序，使用css变量，使用demo
11-16
微信小程序利用CSS变量是为了提升样式的一致性和复用性。CSS变量，也称为自定义属性或CSS Custom Properties，允许你在JavaScript中动态设置和修改样式表中的值。在微信小程序中，你可以这样做： 1. 定义变量： 在`app.wxss`文件中定义全局变量，例如： ```wxss :root { --primary-color: #3F51B5; } ``` 2. 使用变量： 在任何需要的地方引用这个变量，如按钮、背景等： ```wxss button { color: var(--primary-color); } ``` 3. 动态设置变量： 在JavaScript中，可以动态改变变量的值： ```javascript const setPrimaryColor = (newColor) => { wx.setStorageSync('--primary-color', newColor); // 更新页面样式 this.setData({ primaryColor: newColor, }); }; ``` 4. 示例应用： 当你需要切换主题色时，可以调用`setPrimaryColor()`函数传入新的颜色。 ```javascript onLoad() { setPrimaryColor('#FF0000'); // 设置红色主题 } // 在按钮点击事件中，切换到蓝色主题 buttonClick() { setPrimaryColor('#3F51B5'); } ```
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值