By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

目前 ice-plugin-fusion 的多主题切换是通过 css 变量实现的，动态 css 变量没法支持 sass 的静态计算，所以一旦变量参与了计算将会导致编译失败

规范组件写法，不应该将主题包 variables.scss 文件中涉及的色值进行计算。

多主题方案是将 sass 变量的值替换为 css 变量，然后运行时定义/切换 css 变量，因此如果在 sass 里对颜色变量进行计算，静态编译时因为找不到这个 css 变量就会报错，所以要推进当前这个多主题的方案就需要 限制代码（主要是组件）里通过 sass 计算颜色变量 。

上面这个是 Search 组件里有相关代码，需要讨论下如何在组件层面避免使用这种写法：

search里进行颜色的目的是获取带有透明度的颜色值，这里已经开放了背景色、背景色透明度两个配置，目前看没办法去掉这里的逻辑。

未来配置平台会支持透明色配置（node-sass升级到4.7.0以上），将rgba(0,0,0, 0)的颜色以 #00000000 16进制方式表示，把2个配置项合为1个，可以解决此问题

any other solution？

Fusion Next组件库使用的是sass方案，颜色计算是它的基础能力， 不应因为项目工程的原因，让组件放弃使用sass颜色计算能力

配置平台支持透明色配置的能力依赖内网迁移进度，没有确切时间点。

可以看下这个方案是否可行，组件库可以配合做修改：
组件中为每个计算出来的颜色变量取单独的名字

// main.scss
.next-overlay-backdrop {
	background-color: $color-calculate-overlay-bg-color;
// variable.scss
$color-calculate-overlay-bg-color: change-color(
	$color: $mask-background, 
	$alpha: $mask-opacity
)!default;
ice这边提取css变量的时候遇到 $color-calculate-overlay-bg-color 的定义时，先忽略；在webpack构建结束后，再将算出来的值跟这个变量的css版本做关联