需求是:在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变量值的方式要怎么实现?
sass函数无法使用带有 var() 函数变量的参数,因为 css 的 var 是在运行时工作的,而sass是要编译的,你改css变量之后sass并不会跟着编译
功能可以参考这篇文章换肤功能(scss、css变量)
你可以在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框架来处理跨浏览器的差异。 一个非常基本的例子是: 注:如评论