Uni-SCSS 全局样式

uni-scss 是 uni-ui 提供的一套全局样式系统，通过一些简洁的类名和 scss 变量，快速实现页面的布局操作，如颜色、边距、圆角等。

1. 使用 SCSS 变量

安装 uni-scss 插件后，需要在项目根目录的 uni.scss 文件中引入 variables.scss 文件。通过这个文件，可以使用或修改对应的 scss 变量，定制页面主题颜色及其他全局样式。

/* 将此代码放在 uni.scss 文件的最上方 */
@import '@/uni_modules/uni-scss/variables.scss';

/* 以下是默认值变量，如果不需要修改，可省略 */
$uni-primary: #2979ff; /* 主色 */
$uni-primary-disable: mix(#fff, $uni-primary, 50%);
$uni-primary-light: mix(#fff, $uni-primary, 80%);

$uni-success: #18bc37; /* 成功色 */
$uni-success-disable: mix(#fff, $uni-success, 50%);
$uni-success-light: mix(#fff, $uni-success, 80%);

$uni-warning: #f3a73f; /* 警告色 */
$uni-warning-disable: mix(#fff, $uni-warning, 50%);
$uni-warning-light: mix(#fff, $uni-warning, 80%);

$uni-error: #e43d33; /* 错误色 */
$uni-error-disable: mix(#fff, $uni-error, 50%);
$uni-error-light: mix(#fff, $uni-error, 80%);

$uni-info: #8f939c; /* 信息色 */
$uni-info-disable: mix(#fff, $uni-info, 50%);
$uni-info-light: mix(#fff, $uni-info, 80%);

/* 中性色用于文本、背景和边框颜色 */
$uni-main-color: #3a3a3a; /* 主要文字 */
$uni-base-color: #6a6a6a; /* 常规文字 */
$uni-secondary-color: #909399; /* 次要文字 */
$uni-extra-color: #c7c7c7; /* 辅助文字 */

/* 边框颜色 */
$uni-border-1: #f0f0f0;
$uni-border-2: #ededed;
$uni-border-3: #dcdcdc;
$uni-border-4: #b9b9b9;

/* 常规色 */
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);

/* 背景色 */
$uni-bg-color: #f7f7f7;

/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;

/* 阴影 */
$uni-shadow-sm: 0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg: 0 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);

/* 蒙版 */
$uni-mask: rgba($color: #000000, $alpha: 0.4);

这些变量可以根据项目需求进行调整，达到全局样式的自定义。

2. 使用辅助类名快速布局

uni-scss 提供了一系列的辅助类名，可以在页面布局时快速使用，涵盖颜色、边框、圆角、间距等常见布局需求。

2.1 引入辅助类样式

使用这些辅助类名时，需要在 App.vue 文件的 <style lang="scss"> 中引入 index.scss 文件：

/* 在 App.vue 中引入 uni-scss 样式 */
@import '@/uni_modules/uni-scss/index.scss';

2.2 颜色类

通过颜色类名，可以快速为元素设置前景色和背景色。前景色类名与变量同名，背景色类名则在变量类名后加上 -bg 后缀。

前景色：

<view class="uni-primary">主色</view>
<view class="uni-success">成功色</view>
<view class="uni-warning">警告色</view>
<view class="uni-error">错误色</view>

背景色：

<view class="uni-primary-bg">主色背景</view>
<view class="uni-success-bg">成功色背景</view>
<view class="uni-warning-bg">警告色背景</view>
<view class="uni-error-bg">错误色背景</view>

2.3 边框半径类

使用边框半径辅助类名可以快速应用 border-radius 样式，支持对四边或某个方向的边进行圆角处理。类名规则为 uni-radius-${direction}-${size}，其中：

• direction 用来指定边的方向，可选值为：t（上）、r（右）、b（下）、l（左），也可以组合使用，如 tl（左上）、br（右下）。
• size 用来指定圆角大小，可选值为：sm（小）、lg（大）、xl（超大）、pill（全圆角）、circle（圆形，50%）。

示例：

<view class="uni-radius-tl">设置左上圆角</view>
<view class="uni-radius-br-lg">设置右下大圆角</view>
<view class="uni-radius-pill">圆角按钮</view>

你也可以根据项目需要修改默认的边框半径值：

$uni-radius-root: 20px;
$uni-radius: (
  0: 0,
  'sm': $uni-radius-root / 2,
  null: $uni-radius-root,
  'lg': $uni-radius-root * 2,
  'xl': $uni-radius-root * 6,
  'pill': 9999px,
  'circle': 50%
);

2.4 间距类

使用 uni-scss 提供的间距辅助类可以快速设置 margin 和 padding，类名规则为 uni-${property}${direction}-${size}。其中：

• property 为 m 表示 margin，为 p 表示 padding。
• direction 用来指定方向，t（上）、r（右）、b（下）、l（左）、x（水平）、y（垂直）、a（全部方向）。
• size 的取值从 0 到 16，单位为 4px。

示例：

<!-- margin-top 为 8px -->
<view class="uni-mt-2"></view>

<!-- 左右 margin 为 8px -->
<view class="uni-mx-2"></view>

<!-- 上下 padding 为 20px -->
<view class="uni-py-5"></view>

也可以在 uni.scss 中修改默认的间距值：

$uni-space-root: 2;

3. 在 nvue 页面中使用

在 nvue 页面中，由于权重问题，可能需要在页面的最外层加入 container 类名，确保样式生效：

<template>
  <view class="container">
    <view class="uni-ma-5">带外边距的元素</view>
  </view>
</template>

4. 完整案例代码

以下是一个完整的使用 uni-scss 辅助类的案例，包含颜色、边距、圆角等应用：

<template>
  <view class="container">
    <!-- 使用辅助类设置颜色 -->
    <view class="uni-primary">主色</view>
    <view class="uni-success">成功色</view>

    <!-- 使用辅助类设置背景色 -->
    <view class="uni-primary-bg">主色背景</view>
    <view class="uni-error-bg">错误色背景</view>

    <!-- 使用辅助类设置边框半径 -->
    <view class="uni-radius-pill">圆角按钮</view>
    <view class="uni-radius-tl">左上圆角</view>

    <!-- 使用辅助类设置间距 -->
    <view class="uni-mt-2">上边距 8px</view>
    <view class="uni-px-5">左右 padding 20px</view>
  </view>
</template>

<style lang="scss">
@import '@/uni_modules/uni-scss/index.scss';
</style>

总结

uni-scss 是一套灵活的全局样式系统，通过使用 scss 变量和辅助类名，可以快速实现页面布局和风格调整。无论是颜色、边距还是圆角，开发者都可以通过简单的类名完成复杂的布局操作，大大提升开发效率。如果你正在使用 uni-app 开发，uni-scss 是一个不可或缺的工具。