Gulp Sass需要标识符

Question

有人能帮上忙吗。我正在试着运行谷歌的代码实验室，其中包括软件包的"狼吞虎咽"。

[01:02:31] 'build:scss' errored after 117 ms
[01:02:31] Error in plugin "gulp-sass"
Message:
app/styles/_categories.scss
Error: Expected identifier.
╷
50 │   %bg-#4285f4{
│        ^
╵
app/styles/_categories.scss 50:8    codelab-card()
app/styles/_categories.scss 79:1    @import
app/styles/_codelab-card.scss 18:9  @import
app/styles/main.scss 22:9           root stylesheet
Details:
formatted: Error: Expected identifier.
╷
50 │   %bg-#4285f4{
│        ^

Answer 1

我在尝试运行gulf sass为Google Codelabs示例站点服务时也遇到了这个问题

问题

第50行中的sass插值语法如下：

%bg-#{$color}

在原位打开$color，产生

.bg-#XXXXXX

请注意，字符"#"在css 中是一个无效的标识符

修复

将颜色转换为字符串，然后去掉十六进制值(如本答案所述)

$stripped-color: str-slice(inspect($color), 2);
%bg-#{$stripped-color} {
background-color: $color;
}
...