0.1.4 • Published 9 months ago
@gct-paas/scss v0.1.4
样式工具文档
本文档总结了样式系统中的所有 SCSS 方法，包括函数（function）、混合（mixin）等。
目录
函数 (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)
0.1.4
9 months ago
0.1.3
9 months ago
0.1.2
10 months ago
0.1.1
10 months ago
0.1.0
10 months ago
0.0.1
10 months ago
0.0.1-dev.30
11 months ago
0.0.1-dev.29
11 months ago
0.0.1-dev.28
11 months ago
0.0.1-dev.27
11 months ago
0.0.1-dev.26
11 months ago
0.0.1-dev.25
11 months ago
0.0.1-dev.24
11 months ago
0.0.1-dev.23
11 months ago
0.0.1-dev.22
11 months ago
0.0.1-dev.21
11 months ago
0.0.1-dev.20
11 months ago
0.0.1-dev.19
11 months ago
0.0.1-dev.18
11 months ago
0.0.1-dev.17
11 months ago
0.0.1-dev.16
11 months ago
0.0.1-dev.15
12 months ago
0.0.1-dev.14
12 months ago
0.0.1-dev.13
12 months ago
0.0.1-dev.12
12 months ago
0.0.1-dev.11
12 months ago
0.0.1-dev.10
12 months ago
0.0.1-dev.9
12 months ago
0.0.1-dev.8
12 months ago
0.0.1-dev.7
12 months ago
0.0.1-dev.5
1 year ago
0.0.1-dev.4
1 year ago
0.0.1-dev.0
1 year ago