uni.scss的自定义变量

分类：uni-app

scss uniapp

我在uni.scss中有个变量，$mobile默认值是0.65，我希望屏幕小于350的时候它变成0.5.。哪位大佬能帮我实现啊。小红包已经准备好。

就是我希望它是动态根据屏幕来生成这个变量，

2024-08-20 13:17 负责人:无分享

1 个回复

你好，scss变量本质是编译时的变量，运行时变量没了。用css变量值吧。
比如

$primary_color: #ccc

调整为

--color: #ccc  
$primary_color: var(--color)

然后动态调整css变量

Azikou (作者)

<style>

--mobile: 0.65;

@media screen and (max-width: 350px) {

--mobile: 0.5;

}

</style>

我在app.vue里这样写，

然后在组件里width: calc(600rpx * var(--mobile)); 这样写，这就报错了

08:53:44.752 ERROR: Selector --mobile: 0.65; 08:53:44.758 @media screen and (max-width: 350px) is not supported. Weex only support classname selector at App.vue:63

08:53:44.764 WARNING: --mobile is not a standard property name (may not be supported) at App.vue:65

我在外面加 :root 或者page 都是一样的错误

2024-08-21 08:56
BFC

回复 Azikou: nvue不支持css 的媒体查询，用js判断屏幕宽度，动态设置css变量吧

2024-08-21 10:45
Azikou (作者)

回复 BFC: 我可以屏蔽nvue，但是我在app.vue里怎么通过js 改css呀，我用的是vue2.我看了下需要通过style，但是app.vue又没dom给我绑style

2024-08-21 10:57
BFC

回复 Azikou: https://ask.dcloud.net.cn/question/195910 参考这个帖子修改css变量

2024-08-21 11:22

要回复问题请先登录或注册