通过scss变量对elementUI进行主题色变更是否能使用var()函数？

  • Z时代
  • 2024-03-04
  • 分类：IT

需求是：在vue项目初始化前，拿到当前url中的color参数的值，作为elementUI的主题色，达到换肤的效果。（color参数是去掉#的十六进制颜色值）

那么根据官网的提供的方式，创建element-variables.scss，通过改变$--color-primary变量的形式可以达到切换主题色的效果，所以我现在的思路是：
main.js中截取当前url参数，拿到color的颜色值，通过以下方式绑定变量到根元素上

document.documentElement.style.setProperty("--color-primary", `颜色值`)

然后在element-variables.scss中直接使用var()函数引入--color-primary变量

/* 改变主题色变量 */
$--color-primary: var(--color-primary);

现在问题来了，编译器直接报错

 error  in ./src/assets/css/element-variables.scss
Syntax Error:
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
                         ^
      Argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color

所以，请教各位大佬，是scss中不能使用var()函数，还是我这种方式用的不对？如果要实现这个需求，通过改变scss变量值的方式要怎么实现？

回答：

你可以在CSS中使用CSS变量和calc()函数来计算，而不是用mix()函数：

element-variables.scss：

scss
$--color-primary: #409EFF !default; // 默认的主题色
:export {
  colorPrimary: $--color-primary;
}

main.scss：

scss
@import './element-variables.scss';
:root {
  --color-primary: var(--color-primary, #{$colorPrimary}); 
}
.element-button {
  // 用CSS变量计算颜色值
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  &:hover {
    background-color: rgba(var(--color-primary), 0.8);
    border-color: rgba(var(--color-primary), 0.8);
  }
}

回答：

sass函数无法使用带有 var() 函数变量的参数，因为 css 的 var 是在运行时工作的，而sass是要编译的，你改css变量之后sass并不会跟着编译
功能可以参考这篇文章换肤功能（scss、css变量）

以上是 通过scss变量对elementUI进行主题色变更是否能使用var()函数？ 的全部内容， 来源链接： utcz.com/p/934191.html

回到顶部