指南针编译：“...lor}：#{$value}”后的 CSS 无效：预期为“{”，为“;”）

Question

我正在尝试通过修改源 SCSS 文件来精心挑选我们想要在我们的网站中使用的某个主题/插件的部分。有问题的主题是Vali Admin。

我已经很久没有使用过 SASS 或 LESS。根本不熟悉编译它们。我刚刚在我的系统中安装了 ruby​​ 和指南针（通过gem install），并在供应商主题的根目录上运行了compass compile。但是我收到以下错误：

error sass/main.scss (Line 4 of sass/1-tools/bootstrap-source/_root.scss: Invalid CSS after "...lor}: #{$value}": expected "{", was ";")

我还收到了一些关于“运算符附近的插值”的警告。如果需要，我会在此处粘贴。

我不知道为什么会出现该错误。我还没有对 SCSS 文件进行任何更改，我只是在尝试编译供应商源代码。

这里是 SCSS：

:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}

Answer 1

我在 _root.scss 文件中遇到了 Bootstrap 4.3 (https://getbootstrap.com/docs/4.3) 的相同错误。

我正在使用 CodeKit 编译 Scss，但它已经过时了。我意识到它不喜欢编译--#{$varname，其中-- 和# 彼此相邻，中间没有字符串。而这条线运行良好：--breakpoint-#{$bp}: #{$value};

我的解决方案：

更新 CodeKit 解决了这个问题，所以我想你没有使用最新版本的 Compass？

Answer 2

只需删除以下行中的双“-”：

旧：--#{$color}:
新：-#{$color}:

这很好用。

Answer 3

不要对代码进行任何更改。只需升级您正在使用的 sass gem 版本即可。您可以使用gem install sass 安装最新版本。

我有版本 3.4.25，它给了我完全相同的错误。我安装了 3.7.4 版本，一切正常。

点击此处了解更多信息 - https://github.com/sass/sass/issues/2383#issuecomment-399755755

Answer 4

改成

--#{''+$color+''}: #{$value};

并且工作了:)