rgb 和 rgba 函数将 CSS 变量误解为单个值,而不是其输出
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).
内容来源: sass/node-sass