Boostrap 4 beta2 SASS compiling error in _root.scss

Question

I just downloaded the boostrap 4 beta 2 version, but when I try to compile the (original) boostrap.scss file with my Koala compiler, I get this error

Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";" on line 4 of scss/_root.scss
from line 11 of scss\bootstrap.scss
Use --trace for backtrace.

This is _root.scss

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

I tried to use

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

but with no success

How can fix this problem?
Thanks

Answer 1

Update the version of your sass to fix the issue

gem update sass  

or

sudo gem update sass

Ref : https://github.com/twbs/bootstrap/issues/24549

Answer 2

If you really need to use a Sass version below 3.5.2 (for whatever reason), you can solve this problem by modifying the _root.scss partial as follows:

Sass Input (_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 Output:

: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;
}

I know it's not very elegant, but solves the problem with older Sass compilers and produces the desired CSS. I have testet this with Sass 3.3.8.