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

Question

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

我已经很久没有使用过 SASS 或 LESS。完全不熟悉编译它们。我刚刚gem install在我的系统中安装了 ruby​​ 和指南针（通过），并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，但它已经过时了。我意识到它不喜欢编译--#{$varnamewhere--和#live 彼此相邻而中间没有字符串。而这条线工作得很好：--breakpoint-#{$bp}: #{$value};

我的解决方案：

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