【Nova UI】六、SASS 赋能组件库：通用方法与混入的变革力量

序言

在搭建组件库时，我们已用 SASS 实现 BEM 规范，为样式管理筑牢根基🏗️。但 SASS 远不止于此，其丰富通用方法和灵活变量机制，将为组件库样式雕琢带来质的飞跃。

我们的组件库追求高效、易用与风格统一🧩。深挖 SASS 这部分特性，能大幅优化开发流程，提升样式复用与维护性。以后添加新组件、修改样式或适配不同场景，都能轻松实现🤗。

SASS 的通用方法和变量如何为组件库赋能？又会带来哪些提升？接下来，让我们开启探索之旅🚀，见证 SASS 绽放光芒。

通用方法

我们于packages/cheme-chalk/src/mixins目录下创建function.scss文件，这里将汇聚一系列实用的 SASS 函数，为样式管理带来全新的解决方案🎁。

@use 'config';@function createVariableName($list) {$name: -- + config.$namespace;@each $item in $list {@if $item != '' {$name: $name + '-' + $item;}}@return $name;
}@function getVariableName($args...) {@return createVariableName($args);
}@function getVariableValue($args...) {@return var(createVariableName($args));
}

createVariableName 函数接收列表$list，以--和$namespace常量拼接起始，遍历列表将非空元素逐一连接，生成独特变量名。如$list为('button','success') 且$namespace为n，会返回--n-button-success。

getVariableName 封装createVariableName，利用可变参数，让传参更简洁。调用getVariableName('button', 'warning')，效果等同于createVariableName(('button', 'warning'))。

getVariableValue 先依参数生成变量名，再用var函数获取对应值。若已定义--n-button-danger-color: red，调用getVariableValue('button', 'danger', 'color') 就能返回red。

这些函数强化了组件库变量管理，提升代码可维护与复用性，为样式开发添力💪。

通用变量混入

我们于packages/cheme-chalk/src/mixins目录下创建variable-mixins.scss文件，高效且灵活地管理变量是提升开发效率与维护性的关键🔑。以下一系列精心设计的 SASS 通用变量混入，为我们在这方面提供了强大的支持。

@use 'sass:map';
@use 'function' as *;@mixin set-variable($name, $value) {#{getVariableName($name)}: #{$value};
}@mixin set-variable-from-map($name, $key, $variableMap) {#{getVariableName($name, $key)}: #{map.get($variableMap, $key)};
}@mixin set-variable-from-map($name, $key, $variableMap) {#{getVariableName($name, $key)}: #{map.get($variableMap, $key)};
}
@mixin set-variable-from-keys($name, $keys, $variableMap) {@each $key in $keys {@include set-variable-from-map($name, $key, $variableMap)}
}@mixin set-base-variable-from-map($name, $key, $variableMap) {#{getVariableName($name, $key)}: #{map.get($variableMap, $key, 'base')};
}
@mixin set-base-variable-from-keys($name, $keys, $variableMap) {@each $key in $keys {@include set-base-variable-from-map($name, $key, $variableMap)}
}@mixin set-variable-from-global($name, $globalName) {$variableName: getVariableName($name);$globalVariableName: getVariableName($globalName);#{$variableName}: var(#{$globalVariableName});
}

set-variable混入：

• 作用：允许直接设置一个变量，其变量名由getVariableName函数根据传入的$name参数生成，值为传入的$value。
  • 示例：如果调用@include set-variable(('button', 'color'), red)，并且getVariableName函数生成的变量名是--n-button-color，那么最终会生成--n-button-color: red;的 CSS 自定义属性🏷️。

set-variable-from-map混入：

• 作用：从一个映射（$variableMap）中，根据传入的$key获取对应的值，并将其设置为变量。变量名同样由getVariableName函数根据$name和$key生成。
  • 示例：假设有一个映射$button-colors: (primary: blue, secondary: green);，调用@include set-variable-from-map(('button', 'colors'), 'primary', $button-colors)，会生成--n-button-colors-primary: blue;。

set-variable-from-keys混入：

• 作用：通过遍历$keys列表，批量从$variableMap映射中取值并设置变量。对于每个$key，都会调用set-variable-from-map混入。
  • 示例：如果有$button-sizes: (small: 12px, medium: 16px, large: 20px);，调用@include set-variable-from-keys(('button','sizes'), ('small', 'large'), $button-sizes)，会依次生成--n- button-sizes-small: 12px;和--n-button-sizes-large: 20px;。

set-base-variable-from-map混入：

• 作用：从映射中获取带有特定'base'标识的值，并设置为变量。变量名由getVariableName函数根据$name和$key生成。
  • 示例：假设$button-styles: (border: {base: 1px solid black});，调用@include set-base-variable-from-map(('button','styles'), 'border', $button-styles)，会生成--n-button-styles-border: 1px solid black;。

set-base-variable-from-keys混入：

• 作用：遍历$keys列表，批量从映射中获取带有'base'标识的值并设置变量。对每个$key，都会调用set-base-variable-from-map混入。
  • 示例：若$button-states: (hover: {base: background-color: yellow}, active: {base: color: white});，调用@include set-base-variable-from-keys(('button','states'), ('hover', 'active'), $button-states)，会生成--n-button-states-hover: background-color: yellow;和--n-button-states-active: color: white;。

set-variable-from-global混入：

• 作用：从全局变量中获取值并设置为当前变量。变量名分别由getVariableName函数根据$name和$globalName生成。
  • 示例：如果全局变量--n-global-color: purple已经定义，调用@include set-variable-from-global(('button', 'text - color'), ('global', 'color'))，会生成--n-button-text-color: var(--n -global-color);，即--n-button-text-color: purple;。

这些通用变量混入极大地增强了组件库样式中变量设置的灵活性和可维护性，使得我们在处理复杂的样式变量时能够更加高效和便捷🔫。

🦀🦀感谢看官看到这里，如果觉得文章不错的话🙌，点个关注不迷路⭐。
诚邀您加入我的微信技术交流群🎉，群里都是志同道合的开发者👨‍💻，大家能一起交流分享摸鱼🐟。期待与您在群里相见🚀，咱们携手在开发路上共同进步✨ ！
👉点我

感谢各位大侠一路相伴，实在感激！ 不瞒您说，在下还有几个开源项目 📦，它们就像精心培育的幼苗 🌱，急需您的浇灌。要是您瞧着还不错，麻烦动动手指，给它们点亮几颗 Star ⭐，您的支持就是它们成长的最大动力，在此谢过各位大侠啦！

• Nova UI组件库：https://github.com/gmingchen/nova-ui
• 基于 Vue3 + Element-plus 管理后台基础功能框架
• 预览：https://admin.gumingchen.icu
  • Github：https://github.com/gmingchen/agile-admin
  • Gitee：https://gitee.com/shychen/agile-admin
  • 基础版后端：https://github.com/gmingchen/java-spring-boot-admin
  • 文档：http://admin.gumingchen.icu/doc/
• 基于 Vue3 + Element-plus + websocket 即时聊天系统
  • 预览：https://chatterbox.gumingchen.icu/
  • Github：https://github.com/gmingchen/chatterbox
  • Gitee：https://gitee.com/shychen/chatterbox
• 基于 node 开发的后端服务：https://github.com/gmingchen/node-server