当前位置: 首页 > 知识库问答 >
问题:

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

吕承望
2023-05-05

需求是:在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变量值的方式要怎么实现?

共有2个答案

惠翰藻
2023-05-05

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

巫马瀚漠
2023-05-05

你可以在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);
  }
}
 类似资料:
  • 问题内容: 好的,我知道标题不能完全解释这个问题。因此,我正在编写一个执行大量计算的程序,并尝试对其进行优化,以使其运行不会太慢。我有一个函数,该函数是一个类的成员,该函数被调用约500万次。这是功能: 我想知道在类中声明变量vpPointx和vpPointy是否比每次调用函数时声明它们更好/更快。这将是一个很好的优化还是效果不大? 通常,如果这里有任何可以优化的内容,请告诉我。 问题答案: 通过

  • 代码如下: 为什么第一个log打印是 undefined 而不是 1?那个全局的 a 应该在这里生效的才对啊

  • 问题内容: “ var”是可选的吗? 如同 ? 我发现它们都可以通过我的测试工作,我认为这是可选的。那正确吗? 问题答案: 他们的意思不同。如果使用变量,则在范围内声明变量(例如,在函数中)。如果不使用,则变量会在作用域的各个层中冒出气泡,直到遇到给定名称的变量或全局对象(如果在浏览器中是窗口,则为窗口),然后将变量附加到该变量。这与全局变量非常相似。但是,仍然可以使用删除它(很可能是其他人的代码

  • 问题内容: 我正在用JavaScript构建一些对象并将这些对象推入数组,将要使用的键存储在变量中,然后像这样创建对象: 但是,当我尝试检查每个对象的对象数组时,键不是变量键的值。有什么方法可以通过变量设置键的值吗? 问题答案: 您需要先制作对象,然后使用来设置它。 如果您能够使用 ES6 和 Babel ,则可以使用此新功能:

  • 问题内容: 我刚刚开始学习Go,有些事情引起了我的注意。 功能如下: 等等。作为来自C语言的人,我想知道: 1)是否可以通过变量本身来调用这些函数(如中所述)? 2)这是一种常见的做法(定义泛型函数并让其找出类型及其应执行的操作),还是仅用于内置类型。例如,如果我要定义自己的类型,例如,是否应该在类型内定义和附加函数,并将其命名为 还是应该定义一个接收列表的函数,例如: 问题答案: 1-您不能将内

  • 问题内容: 我有一个 变量字符串 ,其中包含格式正确且有效的XML。我需要使用JavaScript代码来解析此供稿。 如何使用(浏览器兼容)JavaScript代码来完成此操作? 问题答案: Internet Explorer和基于Mozilla的浏览器为XML解析提供了不同的对象,因此明智的是使用jQuery之类的JavaScript框架来处理跨浏览器的差异。 一个非常基本的例子是: 注:如评论