样式工具文档

本文档总结了样式系统中的所有 SCSS 方法，包括函数（function）、混合（mixin）等。

目录

• 函数 (Functions)
  • CSS 变量函数
  • 工具函数
• 混合 (Mixins)
  • BEM 混合
  • CSS 变量混合
  • 工具混合
  • 排版混合
  • 布局混合

函数 (Functions)

CSS 变量函数

这些函数用于管理和使用 CSS 变量。

| 函数名 | 描述 | 参数 | 返回值示例 | |--------|------|------|------------| | joinVarName | 连接变量名 | $list (变量名列表) | '--gct-button-text-color' | | getCssVarName | 获取 CSS 变量名 | $args... (变量名组件) | '--gct-button-text-color' | | getCssVar | 获取 CSS 变量 | $args... (变量名组件) | var(--gct-button-text-color) | | getCssVarWithDefault | 获取带默认值的 CSS 变量 | $args (变量名组件), $default (默认值) | var(--gct-button-text-color, red) |

工具函数

其他工具函数。

| 函数名 | 描述 | 参数 | 返回值示例 | |--------|------|------|------------| | rem | 将像素值转换为 rem 单位 | $values (值列表) | 0.625rem 10rem 0 auto (从 10px 10rem 0 auto) |

混合 (Mixins)

BEM 混合

这些混合用于实现 BEM 命名方法的 SCSS 支持。

| 混合名 | 描述 | 参数 | |--------|------|------| | b | 定义 BEM 块 | $block (块名) | | e | 定义 BEM 元素 | $element (元素名) | | m | 定义 BEM 修饰符 | $modifier (修饰符名) | | when | 定义状态类 | $state (状态名) | | dark | 定义暗黑模式下的样式 | $block (块名) | | bem | 生成 BEM 格式的类名 | $block, $element, $modifier |

CSS 变量混合

这些混合用于设置和操作 CSS 变量。

| 混合名 | 描述 | 参数 | |--------|------|------| | set-css-var-value | 设置 CSS 变量值 | $name (变量名), $value (值) | | set-css-var-type | 根据类型设置 CSS 变量 | $name (名称), $type (类型), $variables (变量映射) | | set-css-color-type | 设置 CSS 颜色类型及其变体 | $colors (颜色映射), $type (颜色类型) | | set-component-css-var | 为组件设置所有 CSS 变量 | $name (组件名), $variables (变量映射) | | set-css-color-rgb | 设置 CSS 颜色 RGB 值 | $type (颜色类型) | | css-var-from-global | 从全局 CSS 变量生成新的 CSS 变量 | $var (新变量), $gVar (全局变量) |

工具混合

通用工具混合。

| 混合名 | 描述 | 参数 | |--------|------|------| | utils-ellipsis | 文本溢出时显示省略号 | 无 | | overflow-wrap | 超出自动换行，识别换行空白符 | 无 | | no-repeat | 分隔符样式复用，相邻不重复显示 | 无 | | mask | 创建遮罩层样式 | $bg-color (背景颜色) |

排版混合

字体和排版相关混合。

| 混合名 | 描述 | 参数 | |--------|------|------| | font-1 | 10px/14px 字体样式 | 无 | | font-2 | 12px/16px 字体样式 | 无 | | font-3 | 14px/22px 字体样式 | 无 | | font-4 | 16px/24px 字体样式 | 无 | | font-5 | 18px/26px 字体样式 | 无 | | font-6 | 20px/28px 字体样式 | 无 | | font-7 | 22px/30px 字体样式 | 无 | | font-8 | 24px/32px 字体样式 | 无 | | font-9 | 28px/36px 字体样式 | 无 | | font-10 | 32px/42px 字体样式 | 无 | | font-11 | 36px/48px 字体样式 | 无 | | font-12 | 40px/54px 字体样式 | 无 |

布局混合

布局相关混合。

| 混合名 | 描述 | 参数 | |--------|------|------| | flex-center | 完全居中的弹性容器 | 无 | | flex | 弹性布局复用 | $direction (方向), $horizontal (水平对齐), $vertical (垂直对齐), $wrap (换行) |

注：样式规范参考 Semi Design (https://semi.design/zh-CN/basic/tokens)