# SCSS 颜色属性变量的烦恼
**URL:** https://meta.discourse.org/t/scss-color-property-variable-headaches/278711
**Category:** Development
**Created:** [2023年九月12日 12:37 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711 "2023-09-12T12:37:00Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月12日 12:37 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/1 "2023-09-12T12:37:00Z")
是否有懂代码的专家能解释一下，为什么以下代码（无论 settings.yaml 文件内容如何）似乎总是会抛出错误：
```scss
.d-header {
background: rgba($header_color, $transparency);
}
```
而这个却不会？
```scss
.d-header {
background: rgba(darkslategrey, 0.5);
}
```
即使我将代码切换为使用 `$header_color` 的 `rgb(47, 79, 79)` 格式，它总是会给我一个与 `$color` 元素相关的错误。 🤔
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [2023年九月12日 12:43 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/2 "2023-09-12T12:43:41Z")
这对我有效吗？
```plaintext
$header_color: rgb(0,0,0);
$transparency: 0.5;
.d-header {
background: rgba($header_color, $transparency);
}
```
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月12日 12:57 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/3 "2023-09-12T12:57:08Z")
但是，当我像这样将变量放入 settings.yml 时，它对我不起作用。我收到一个错误，说 `$color 不是颜色`，尽管我在这里没有使用 `$color` 变量。所以我想这可能与我不理解的插值有关。
```yaml
header_color:
type: string
default: ""
description:
en: "..."
transparency:
type: string
default: ""
description:
en: "..."
```
在我看来，这似乎与 CSS 的编译方式有关。变量在 CSS 运行时声明时有效，但不能通过单独的 settings.yml 文件动态设置。🤔
这样做也不起作用：
```scss
.d-header {
background: rgba(#{$header_color}, #{$transparency});
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年九月12日 13:20 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/4 "2023-09-12T13:20:07Z")
嗨 Lilly！
我最近也遇到了同样的问题。😄
简短回答：主题和 CSS 变量被视为字符串，虽然您可以在 `color`、`background`、`border` 等属性中使用它们，但不能在 SCSS 颜色函数中使用它们。
该问题与 Discourse 无关：
>
>
> I am passing in variables to sass using gulp-sass-variables, which will always i…nject a string.
>
> Unquote doesn't seem to have any effect on my string.
>
> \`\`\`
> $primary: "#ffffff"; // \<- Passed in via gulp-sass-variables
>
> $anchor: scale-color(unquote($primary), $lightness: -14%); // Error: $color: #ffffff is not a color.
> \`\`\`
>
> Am I using unquote in the wrong way?
有一个过于复杂的方法可以规避这个问题，我没有尝试过：[Unquote not working on colour string · Issue #3006 · sass/sass · GitHub](https://github.com/sass/sass/issues/3006#issuecomment-798800454)
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2023年九月12日 13:54 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/5 "2023-09-12T13:54:24Z")
你好莉莉 👋
您必须从这些创建变量，以便在设置中使用。 🙂
这是一个快速示例：
> **[GitHub - VaperinaDEV/header-transparency](https://github.com/VaperinaDEV/header-transparency)**
>
> Contribute to VaperinaDEV/header-transparency development by creating an account on GitHub.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月12日 13:58 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/6 "2023-09-12T13:58:30Z")
太棒了，谢谢你 @Don 🙂
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年九月12日 13:59 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/7 "2023-09-12T13:59:51Z")
我不是第一次说“这不可能”，而你却说“是的，这是可能的”，唐 😄
这可能也不是最后一次 🙈
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2023年十月12日 14:00 UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/8 "2023-10-12T14:00:20Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.