如何通过js动态调整小程序中的css变量样式？

本文共计629个文字，预计阅读时间需要3分钟。

使用Sass或Stylus，可以方便地通过变量来设计样式。CSS同样支持定义变量，但小程序由于不支持动态CSS语法，可以使用CSS变量来简化开发工作。以下是基本用法：

css/* 基本用法 */:root { --main-color: #333; --font-size: 14px;}

body { color: var(--main-color); font-size: var(--font-size);}

/* 基础使用方法 *//* 基础使用 */:root { --button-padding: 10px 20px; --button-bg: #00f;}

button { padding: var(--button-padding); background-color: var(--button-bg);}

使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。