css变量用法（原生js、小程序）

原创已于 2023-12-15 09:33:07 修改 · 7.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #css #小程序

于 2022-12-15 11:43:26 首次发布

前端同时被 3 个专栏收录

71 篇文章

订阅专栏

CSS

14 篇文章

订阅专栏

微信小程序

10 篇文章

订阅专栏

本文介绍如何在微信小程序中使用CSS变量。包括在wxss文件中定义变量及在js中动态修改变量的方法。

背景：写一个动效，需要先请求接口拿到数据，再根据数据计算高度，此时便想到了scss、less变量写法，但由于项目是css，那么在微信小程序css是否也可以像scss/less一样，支持变量写法呢？

答案肯定是可以的。

总结一下小程序css使用变量的用法：

1、css原始定义方式

首先在原生的html、css中是支持css变量的，在root节点里定义所需变量，便可以在整个页面使用，约定变量以--开头，调用的时候用var()函数。

用法如下：

<style>
    :root {
        --final-top: 40px;
    }

    .my-wapper{
        top: var(--final-top);
    }
</style>

在微信小程序中，使用原理相同，区别在于小程序的根结点是page选择器。

在wxss文件中定义并使用：(也可以在app.wxss中定义即可全局使用)

page {
    --final-top: 40px;
}

.my-wapper {
    top: var(--final-top);
}

也可以在wxml中使用：

<view style="top: (--final-top);">
    可以直接在wxml里面使用wxss变量！
</view>

2、在js中定义

原生js是支持动态修改css的，小程序可不可以呢？

因为我需要先拿到接口返回的数据再做处理，所以上述方法就行不通了，那我们直接在js文件中直接定义即可，需要用到setData，然后便可以在wxss文件中使用。例如：

 this.setData({
     style: `--point-final-height: ${130 * (19 - randomScore)}rpx;`
 })

.point-box {
    width: 328rpx;
    height: 131rpx;
    background: rgba(255, 254, 238, 0);
    position: absolute;
    top: 0;
    animation: bounce_box 1.5s linear 1s forwards;
}

@keyframes bounce_box {
    0% {
        top: 0rpx;
    }

    100% {
        top: var(--point-final-height);
    }
}