【Nova UI】七、SASS 全局变量体系：组件库样式开发的坚固基石

序言

咱们已经实现了 SASS 中一系列实用的函数和混入，可它们究竟如何在实际的组件库样式开发里大展身手，尤其是在构建全局变量体系这一关键环节呢🧐？这篇文章将为你揭晓答案，带你深入了解怎样利用这些工具实现 SASS 全局变量的巧妙定义、灵活运用，进而让整个组件库的样式焕发出更加协调统一的光彩🌟。

全局变量

主题类型

为了有序管理主题相关的样式变量，我们在packages/theme-chalk/src/mixins目录下创建了variable.scss文件📄。通过参考 element UI 组件中优秀的设计模式，我们着手定义一系列主题类型及其对应的颜色变量。

css 复制代码

$types: default, primary, success, warning, danger, error, info;
$color: () !default;
$color: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'default': (
      'base': inherit,
    ),
    'primary': (
      'base': #4285F4,
    ),
    'success': (
      'base': #0F9D58,
    ),
    'warning': (
      'base': #F4B400,
    ),
    'danger': (
      'base': #DB4437,
    ),
    'error': (
      'base': #B00020,
    ),
    'info': (
      'base': #616161,
    ),
  ),
  $color
);
$color-white: map.get($color, 'white') !default;
$color-black: map.get($color, 'black') !default;
$color-default: map.get($color, 'default', 'base') !default;
$color-primary: map.get($color, 'primary', 'base') !default;
$color-success: map.get($color, 'success', 'base') !default;
$color-warning: map.get($color, 'warning', 'base') !default;
$color-danger: map.get($color, 'danger', 'base') !default;
$color-error: map.get($color, 'error', 'base') !default;
$color-info: map.get($color, 'info', 'base') !default;

通过定义$types变量，我们构建了一个清晰的主题类型集合，这为后续在不同场景下区分和应用样式提供了明确的指引🧭。而$color变量的构建则是通过深度合并操作，将基础颜色（如白色和黑色）与各个主题类型所对应的颜色信息，有条不紊地整合到一个映射中。每个主题类型下的base属性，精准地指定了该主题的基础颜色值。最后，利用map.get函数从$color映射中提取出各个颜色值，并将其定义为独立变量，这使得在组件库样式编写过程中，无论是设置文本颜色、背景颜色，还是处理其他与颜色相关的样式属性，都能轻松实现，有力地确保了样式的一致性与可维护性。

这样的设计，犹如搭建了一个井然有序的 "颜色管理库"🎨，极大地提升了主题类型和颜色变量的管理效率，在实际的样式开发应用中，显著提高了开发效率与灵活性，让开发者能够更加专注于样式的创意与实现。

字体颜色

在字体颜色的管理方面，我们同样追求高效与统一。以下是在variable.scss文件中对字体颜色变量的定义。

css 复制代码

$font-color: () !default;
$font-color: map.merge(
  (
    'default': #333333,
    'primary': getVariableValue('color', 'primary'),
    'success': getVariableValue('color', 'success'),
    'warning': getVariableValue('color', 'warning'),
    'danger': getVariableValue('color', 'danger'),
    'error': getVariableValue('color', 'error'),
    'info': getVariableValue('color', 'info'),
  ),
  $font-color
);

这段代码首先将$font-color初始化为空映射，然后通过map.merge函数，将一个包含默认字体颜色以及基于不同主题颜色衍生的字体颜色映射与原有的$font-color进行合并。其中，默认字体颜色设置为#333333，这是一种广泛应用于正文文本，能提供良好可读性的深灰色。而其他主题对应的字体颜色，则巧妙地借助getVariableValue函数，从之前定义的$color变量中获取相应主题的颜色值。这种设计不仅体现了变量的复用性，还确保了在主题颜色发生变化时，相关的字体颜色能够自动同步更新，极大地增强了样式的一致性与可维护性。

类似地，对于组件库中的其他样式属性，我们也采用了相同的设计思路与方法进行管理。由于具体实现方式较为相似，在此不一一赘述，若你想深入了解更多细节，可以前往下方提到的Nova UI组件仓库地址中查看🔍。

初始化css自定义属性

为了在整个项目中方便地使用我们定义的全局变量，我们需要将其转化为 CSS3 变量。在packages/theme-chalk/src/mixins目录下，我们新创建了_root.scss文件，并运用上篇文章中精心编写的混入方法，实现变量的声明。

less 复制代码

@use 'variable.scss' as *;
@use 'variable-mixins.scss' as *;

:root {
  @include set-base-variable-from-keys('color', $types, $color);
  @include set-variable-from-keys('font-color', $types, $font-color);
}

在这段代码中，我们首先通过@use语句引入了variable.scss和variable - mixins.scss文件，以便能够使用其中定义的变量和混入。在:root选择器中，利用set-base-variable-from keys和set-variable-from-keys混入，分别将$color和$font-color映射中的变量，以 CSS3 变量的形式进行声明。这样，在整个项目的 CSS 样式中，都可以方便地通过var()函数来引用这些全局变量，实现样式的统一控制与灵活调整。

合并引入

在实际的开发过程中，如果每次使用相关内容都需要导入多个文件，无疑会增加开发的复杂性与繁琐性。为了简化这一流程，我们在packages/theme-chalk/src/mixins目录下，创建了一个统一的入口文件index.scss。

less 复制代码

@forward 'config';
@forward 'bem';
@forward 'variable';
@forward 'variable-mixins';
@forward 'function';
@forward 'root';

通过这个index.scss文件，我们使用@forward指令将项目中所需的各个文件内容统一暴露出去。在其他 SASS 文件中，只需导入这一个index.scss文件，即可轻松获取到所有相关的配置、混入、函数以及变量定义等内容。这一设计极大地简化了文件导入的过程，提高了开发效率，同时也使得项目的文件结构更加清晰、易于管理📁。

通过以上一系列精心的设计与实现，我们成功构建了一套功能强大、灵活高效的 SASS 全局变量体系，为组件库的样式开发与管理提供了坚实的基础，助力打造出风格统一、易于维护的优质组件库。

🦀🦀感谢看官看到这里，如果觉得文章不错的话🙌，点个关注不迷路⭐。

诚邀您加入我的微信技术交流群🎉，群里都是志同道合的开发者👨‍💻，大家能一起交流分享摸鱼🐟。期待与您在群里相见🚀，咱们携手在开发路上共同进步✨ ！ 👉点我
感谢各位大侠一路相伴，实在感激！不瞒您说，在下还有几个开源项目 📦，它们就像精心培育的幼苗 🌱，急需您的浇灌。要是您瞧着还不错，麻烦动动手指，给它们点亮几颗 Star ⭐，您的支持就是它们成长的最大动力，在此谢过各位大侠啦！

Nova UI组件库：github.com/gmingchen/n...

基于 Vue3 + Element-plus 管理后台基础功能框架

预览：admin.gumingchen.icu

Github：github.com/gmingchen/a...

Gitee：gitee.com/shychen/agi...

基础版后端：github.com/gmingchen/j...

文档：admin.gumingchen.icu/doc/

基于 Vue3 + Element-plus + websocket 即时聊天系统

预览：chatterbox.gumingchen.icu/

Github：github.com/gmingchen/c...

Gitee：gitee.com/shychen/cha...

基于 node 开发的后端服务：github.com/gmingchen/n...