[RFC] Next 组件中 sass 颜色计算问题

[ClarkXia]

背景

ice-scripts 支持的多主题是通过注入 css 变量的方案实现，但这种方案限制了Next组件中不能将替换的 sass 色值变量用于色值计算。
sass 颜色计算作为 sass 基础的能力，希望不要限制组件对颜色变量的使用。希望主题方案上可以进行支持

方案

1. 参与计算的色值按规则定义并且定义在 variable.scss 中，方便提取
2. 生成对应的 sass 文件，通过 node-sass 进行编译，获取最终色值

@import 'theme/variable.scss';
@import 'next/variable.scss';
$color-calculate-overlay-bg-color: change-color(
  $color: $mask-background, 
  $alpha: $mask-opacity
)!default;
.color-calculate-overlay-bg-color {color: $color-calculate-overlay-bg-color;}

理论编译结果：

.color-calculate-overlay-bg-color {color: #ffffff;}

3. 提取计算后色值，将原 sass 色值变量替换为 css 变量，其他 sass 色值变量走现有替换逻辑

已验证追加覆盖 sass 后将不会再执行原 sass 内容的计算逻辑

约束

针对 Next 组件进行约束方便统一提取计算变量：

• 所有计算变量均需要定义在 variable.scss 文件中
• 按指定的命名规则由工程获取，比如参与颜色计算的 均需要以 $color-calculate 开头

[youluna]

OK 按照约束条件来没问题的

[ClarkXia]

[email protected] 已支持