在_root.scss中Boostrap 4 beta2 SASS编译错误

Question

我刚刚下载了boostrap 4 beta 2版本,但是当我尝试使用我的Koala编译器编译(原始)boostrap.scss文件时,我收到此错误

错误:"... lor}之后的CSS无效:#{$ value}":期望"{",是";" 在scss/bootstrap.scss
的第11 行的scss/_root.scss的第4 行,
使用--trace进行回溯.

这是_root.scss

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

我试着用

--`#{$color}`: `#{$value}`;

但没有成功

怎么解决这个问题？
谢谢

Answer 1

更新您的sass版本以解决问题

gem update sass  

要么

sudo gem update sass

参考:https://github.com/twbs/bootstrap/issues/24549

Answer 2

如果确实需要使用低于3.5.2的Sass版本（无论出于何种原因），则可以通过如下修改_root.scss部分来解决此问题：

Sass输入（_root.scss）：

@function literal($output) {
  @return unquote($output);
}
$tmpliteral: literal('--');
:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    #{$tmpliteral}#{$color}: #{$value};
  }

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

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

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

CSS输出：

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: white;
  --gray: #868e96;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #868e96;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

我知道它不是很好，但是可以解决旧版本的Sass编译器的问题并生成所需的CSS。我用Sass 3.3.8对此进行了测试。