如何在uniapp的css编写中使用变量？

1. 使用 SCSS / LESS 预处理器

uni-app 支持 SCSS 和 LESS 预处理器。

1、变量创建

scss

$primary-color: #007aff;
$font-size: 16px;

.view {
color: $primary-color;
font-size: $font-size;
}

less

@primary-color: #007aff;
@font-size: 16px;

.view {
color: @primary-color;
font-size: @font-size;
}

2、变量使用

在 uni-app 中，vue 文件的 <style> 标签可以添加 lang="scss" 或 lang="less"

<style lang=”scss”>
$primary-color: #007aff;

.view {
color: $primary-color;
}
</style>

3、全局使用

3.1）在 uni.scss 中全局定义

uni-app 提供了 uni.scss 作为全局样式文件，可以在这里定义 SCSS 变量。

uni.scss 会自动引入到所有 vue 组件和页面，不需要手动 @import。

3.2）使用 @import 手动引入

如果你希望手动管理多个 SCSS 文件，可以创建一个全局 SCSS 文件并 @import

global.scss

$primary-color: #007aff;
$font-size: 16px;

<style lang=”scss”>
@import “@/common/common.scss”;

.view {
color: $primary-color;
}
</style>

适用于需要分模块管理多个 SCSS 变量的项目。

3.3）使用 prependData 在 vue.config.js 自动引入

如果你的 uni-app 是 Vue CLI 版本，你可以在 vue.config.js 中配置 scss 全局变量：

module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import “@/common/common.scss”;`
}
}
}
};

2. 使用 CSS3 变量（:root 或 page 级别变量）

如果你希望使用 CSS 原生变量（CSS 变量），可以这样定义：

:root {
–primary-color: #007aff;
–font-size: 16px;
}

.view {
color: var(–primary-color);
font-size: var(–font-size);
}

或者在 page 作用域中定义：

page {
–primary-color: #007aff;
}

.view {
color: var(–primary-color);
}

方法对比

如果你的项目支持 SCSS/LESS，推荐使用 SCSS/LESS 变量进行管理。

如果需要动态修改主题色，推荐使用 CSS3 变量。