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

Posted 2023-02-16

【中文标题】指南针编译：“...lor：#$value”后的 CSS 无效：预期为“”，为“;”）

【英文标题】：compass compile: Invalid CSS after "...lor: #$value": expected "", was ";")指南针编译：“...lor：#$value”后的 CSS 无效：预期为“”，为“;”）

【发布时间】：2020-03-09 04:24:15

【问题描述】：

我正在尝试通过修改源 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);

【参考方案1】：

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

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

我的解决方案：

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

【参考方案2】：

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

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

这很好用。

【参考方案3】：

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

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

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

【参考方案4】：

改成

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

并且工作了:)

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review