#2251·node-sass

rgb 和 rgba 函数将 CSS 变量误解为单个值,而不是其输出

作者: jannisborgers创建于 2018年2月14日更新于 2024年3月31日
标签External - LibSass

Example:

:root { --color--text: 18, 18, 26; }
body { color: rgba(var(--color--text), 0.8); }

Expected outcome:

body {
color: rgba(18, 18, 26, 0.8);
}

Actual outcome:

When using rgba():

{
  "status": 1,
  "file": "/path/to/partial.scss",
  "line": 30,
  "column": 23,
  "message": "argument `$color` of `rgba($color, $alpha)` must be a color\n\nBacktrace:\n\tsrc/scss/elements/_projectTeaser.scss:30, in function `rgba`\n\tsrc/scss/elements/_projectTeaser.scss:30",
  "formatted": "Error: argument `$color` of `rgba($color, $alpha)` must be a color\n\n       Backtrace:\n       \tsrc/scss/elements/_projectTeaser.scss:30, in function `rgba`\n       \tsrc/scss/elements/_projectTeaser.scss:30\n        on line 30 of src/scss/elements/_projectTeaser.scss\n>>     background-color: rgba(var(--color--fadePrimary), 0.8);\n   ----------------------^\n"
}
When using rgb(), without the alpha-value:

{ "status": 1, "file": "/path/to/partial.scss", "line": 30, "column": 23, "message": "Function rgb is missing argument $green.", "formatted": "Error: Function rgb is missing argument $green.\n on line 30 of src/scss/elements/_projectTeaser.scss\n>> background-color: rgb(var(--color--fadePrimary));\n ----------------------^\n" } Notes: This works if I wrap the CSS variable values in their own rgb() function and just output those as property values, but in order to add different alpha-values on the fly, storing only the R, G, and B values in variables is a lot more flexible. As I posted this on Twitter and instantly got a backlash: please note that of course I could use $sass-variables instead, but CSS variables are a lot better to work with for obvious reasons (mutability, element scoping).