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

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

old：-＃{$ color}：新增：-＃{$ color}：

这很好。

Answer 2

_root.scss文件中的Bootstrap 4.3（https://getbootstrap.com/docs/4.3）出现了同样的错误。

我正在使用CodeKit编译Scss，这已经过时了。我意识到，它不喜欢编译--#{$varname和--彼此相邻且没有任何字符串的#。而此行效果很好：--breakpoint-#{$bp}: #{$value};

我的解决方案：

更新CodeKit可以解决此问题，所以我想您不是在使用最新版本的Compass？

Answer 3

请勿在代码中进行任何更改。只需升级您使用的Sass gem的版本即可。您可以使用gem install sass安装最新版本。

我有3.4.25版，它给了我完全相同的错误。我安装了3.7.4版，一切都很好。

在此处查看更多信息-https://github.com/sass/sass/issues/2383#issuecomment-399755755

罗盘编译：“ ... lor}之后的无效CSS：＃{$ value}”：预期的“ {”为“;”）

3 个答案: