如何用CSS变量实现小程序中JS动态调整样式？

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

使用Sass和Stylus可以方便地利用变量进行样式设计，实际上CSS同样支持变量定义。在小程序中，由于原生不支持动态CSS语法，如so等，可以使用CSS变量简化开发工作。以下是基本用法和基础示例：

基本用法：css:root { --main-color: #3498db; --font-size: 16px;}

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

基础示例：css/* 基础颜色变量 */:root { --primary-color: #f39c12; --secondary-color: #2ecc71;}

/* 应用颜色变量 */.button-primary { background-color: var(--primary-color); color: white;}

.button-secondary { background-color: var(--secondary-color); color: white;}

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