代码之家 › 专栏 › 技术社区 › Alejandro

css主题化的深色函数-错误:“深色($color,$amount)”的参数“$color”必须是颜色

sass css3 css

Alejandro · 技术社区 · 6 年前

我正在尝试添加一个选项来更改网站颜色。所以,我有一个颜色字段,工作正常,但问题是,当鼠标悬停时,我需要将颜色更改为10%深。函数深色表示第一个参数必须是颜色。

Error: argument `$color` of `darken($color, $amount)` must be a color

我的代码如下:

:root {
  --main-colour: #f06d06;
}

$colour-primary: var(--main-colour);


.btn {
    background-color: $colour-primary;

    &:hover {
       background-color: darken($colour-primary, 10%);
    }
}

我需要变量——主颜色,因为这将用于实时更改颜色。

有什么想法吗?

非常感谢

3 回复 | 直到 6 年前

vicbyte 6 年前

var(--main-colour) 是一个在运行时插入的css函数(因此它将在编译scss之后解析)。 scss是编译的,因此它的所有函数都是以前计算过的,并且不改变运行时。

代码中的问题是因为 darken 函数需要一个有效的颜色来执行计算,在编译期间,它只得到 VAR(--主色) 而不是颜色本身。( 变暗 是一个scss函数,而不是css函数,因此它不能在运行时更改)。

ValRob 6 年前

这个问题来自于引导。

如果您使用的是react或angular这样的框架,请记住在变量之前导入函数。

@import 'functions';
@import 'variables';

diogui 6 年前

你需要导入3个文件

@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins";

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

Henry · scss或css中的calc函数不起作用

2 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

2 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前