SCSS 颜色属性变量的烦恼

开发
1

是否有懂代码的专家能解释一下，为什么以下代码（无论 settings.yaml 文件内容如何）似乎总是会抛出错误：

.d-header {
    background: rgba($header_color, $transparency);
}

而这个却不会？

.d-header {
    background: rgba(darkslategrey, 0.5);
}

即使我将代码切换为使用 $header_color 的 rgb(47, 79, 79) 格式，它总是会给我一个与 $color 元素相关的错误。 :thinking:

2 个赞
2

这对我有效吗？

$header_color: rgb(0,0,0);
$transparency: 0.5;

.d-header {
    background: rgba($header_color, $transparency);
}
1 个赞
3

但是，当我像这样将变量放入 settings.yml 时，它对我不起作用。我收到一个错误，说 $color 不是颜色，尽管我在这里没有使用 $color 变量。所以我想这可能与我不理解的插值有关。

header_color:
  type: string
  default: ""
  description: 
    en: "..."
  
transparency:
  type: string
  default: ""
  description: 
    en: "..."

在我看来，这似乎与 CSS 的编译方式有关。变量在 CSS 运行时声明时有效，但不能通过单独的 settings.yml 文件动态设置。:thinking:

这样做也不起作用：

.d-header {
    background: rgba(#{$header_color}, #{$transparency});
}
1 个赞
4

嗨 Lilly！

我最近也遇到了同样的问题。:smile:

简短回答：主题和 CSS 变量被视为字符串，虽然您可以在 color、background、border 等属性中使用它们，但不能在 SCSS 颜色函数中使用它们。

该问题与 Discourse 无关：

有一个过于复杂的方法可以规避这个问题，我没有尝试过：Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

4 个赞
5

你好莉莉 :wave:
您必须从这些创建变量，以便在设置中使用。 :slightly_smiling_face:
这是一个快速示例：

5 个赞
6

太棒了，谢谢你 @Don :slight_smile:

3 个赞
7

我不是第一次说“这不可能”，而你却说“是的，这是可能的”，唐 :smile:

这可能也不是最后一次 :see_no_evil:

8 个赞
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.