sass: Compiler doesn't like Bootstrap 4 _root.scss

The compiler doesn’t like the recently added file _root.scss in Bootstrap 4. Tested with versions 3.5.1 and a freshly installed version 4.0.0.alpha.1 on Windows 7 platform.

Content of the _root.scss file:

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

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

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

  --font-family-sans-serif: $font-family-sans-serif;
  --font-family-monospace: $font-family-monospace;
}

Here the error - could link it to the use of double dashes at the start of lines 3, 7 etc. (removing the dashes the thing compiles). I have no experience whatsoever with Ruby, so I cannot help in finding / solving the problem.

/*
Error: Invalid CSS after "...$color}: $value": expected "{", was ";"
        on line 3 of www/scss/bootstrap/_root.scss
        from line 11 of www/scss/bootstrap/bootstrap.scss
        from line 2 of www/scss/custom/style.scss

1: :root {
2:   @each $color, $value in $colors {
3:     --#{$color}: $value;
4:   }
5: 
6:   @each $color, $value in $theme-colors {
7:     --#{$color}: $value;
8:   }

Backtrace:
www/scss/bootstrap/_root.scss:3
www/scss/bootstrap/bootstrap.scss:11
www/scss/custom/style.scss:2
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:1179:in `expected'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:1115:in `expected'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:1110:in `tok!'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:655:in `block'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:725:in `declaration_or_ruleset'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:675:in `block_child'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:664:in `block_contents'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:656:in `block'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:308:in `each_directive'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:223:in `special_directive'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:198:in `directive'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:675:in `block_child'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:664:in `block_contents'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:656:in `block'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:649:in `ruleset'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:674:in `block_child'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:664:in `block_contents'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:126:in `stylesheet'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/scss/parser.rb:42:in `parse'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/engine.rb:403:in `_to_tree'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/engine.rb:309:in `to_tree'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:324:in `block in visit_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:88:in `block in with_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:115:in `with_frame'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:88:in `with_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:323:in `visit_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/base.rb:36:in `visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:79:in `block in with_base'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:115:in `with_frame'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:79:in `with_base'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:158:in `visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:326:in `block (2 levels) in visit_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:326:in `map'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:326:in `block in visit_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:88:in `block in with_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:115:in `with_frame'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:88:in `with_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:323:in `visit_import'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/base.rb:36:in `visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:79:in `block in with_base'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:115:in `with_frame'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/stack.rb:79:in `with_base'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:158:in `visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/base.rb:52:in `map'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/base.rb:52:in `visit_children'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/base.rb:36:in `block in visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/base.rb:36:in `visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:157:in `visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/visitors/perform.rb:8:in `visit'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/root_node.rb:36:in `css_tree'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/engine.rb:378:in `_render_with_sourcemap'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/engine.rb:295:in `render_with_sourcemap'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/plugin/compiler.rb:490:in `update_stylesheet'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/plugin/compiler.rb:209:in `each'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/plugin/compiler.rb:293:in `watch'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/plugin.rb:108:in `method_missing'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/exec/sass_scss.rb:381:in `watch_or_update'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/exec/sass_scss.rb:51:in `process_result'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/exec/base.rb:52:in `parse'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/lib/sass/exec/base.rb:19:in `parse!'
D:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-4.0.0.alpha.1/bin/scss:13:in `<top (required)>'
D:/Ruby24-x64/bin/scss:22:in `load'
D:/Ruby24-x64/bin/scss:22:in `<main>'
*/

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 24 (7 by maintainers)

Links to this issue

Commits related to this issue

Add more specs for custom property interpolation This adds specs for interpolating the name of the property. See sass/sass#2383 — committed to sass/sass-spec by nex3 7 years ago
Fix custom property interpolation Interpolation that included the full property name (such as --#{foo}) was crashing the parser. Closes #2383 — committed to sass/sass by nex3 7 years ago
Add more specs for custom property interpolation (#1169) This adds specs for interpolating the name of the property. See sass/sass#2383 — committed to sass/sass-spec by nex3 7 years ago
Fix custom property interpolation (#2384) Interpolation that included the full property name (such as --#{foo}) was crashing the parser. Closes #2383 — committed to sass/sass by nex3 7 years ago
Drop Compass support, bump minimum Sass version Compass is no longer maintained and hasn't seen a release for 3 years. The compass gem locks Sass to version < 3.5. However, we now need Sass v3.5+ du... — committed to twbs/bootstrap-rubygem by glebm 7 years ago
Drop Compass support, bump minimum Sass version Compass is no longer maintained and hasn't seen a release for 3 years. The compass gem locks Sass to version < 3.5. However, we now need Sass v3.5+ du... — committed to twbs/bootstrap-rubygem by glebm 7 years ago
Escape SassScript in custom variable values This is required for Sass v3.5+ compatibility. See https://github.com/sass/sass/blob/stable/doc-src/SASS_CHANGELOG.md#backwards-incompatibilities----must-... — committed to twbs/bootstrap by glebm 7 years ago
Add a spec for custom vars with an #{interp} value See sass/sass#2383 — committed to glebm/sass-spec by glebm 7 years ago
Use `inspect` for fonts as per nex3@'s comment https://github.com/sass/sass/issues/2383#issuecomment-336349172 — committed to twbs/bootstrap by glebm 7 years ago
Escape SassScript in custom variable values (#24354) This is required for Sass v3.5+ compatibility. See https://github.com/sass/sass/blob/stable/doc-src/SASS_CHANGELOG.md#backwards-incompatibilities... — committed to twbs/bootstrap by glebm 7 years ago
Add a spec for custom vars with an #{interp} value See sass/sass#2383 — committed to sass/sass-spec by glebm 7 years ago
Require sass >= 3.5.2 Bootstrap 4.x requires at least sass 3.5.2. For more information see: https://github.com/twbs/bootstrap-rubygem/pull/122 https://github.com/sass/sass/issues/2383 — committed to gmacdougall/solidus by deleted user 6 years ago
Require sass >= 3.5.2 Bootstrap 4.x requires at least sass 3.5.2. For more information see: https://github.com/twbs/bootstrap-rubygem/pull/122 https://github.com/sass/sass/issues/2383 — committed to solidusio/solidus by deleted user 6 years ago
// Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 — committed to nirzaf/ga by nuh-salamin 4 years ago
Drop Compass support, bump minimum Sass version Compass is no longer maintained and hasn't seen a release for 3 years. The compass gem locks Sass to version < 3.5. However, we now need Sass v3.5+ du... — committed to bluedone/bootstrap-rubygem by bluedone 7 years ago

Most upvoted comments

My workaround: Not sure its best solution but I was using compass so none of the other solutions worked for me

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

  @each $color, $value in $theme-colors {
  	$new-color: --#{$color};
    #{$new-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)};
}
`

+17

waldozevenster on Jul 5, 2018

That’s an unfortunate edge-case 😕. Your workaround works, although I’d probably write it as:

--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)};

There are a couple behaviors interacting here:

When Sass sees a CSS custom property, it has to parse the value differently—custom properties allow any text whatsoever, which means that all the syntax that’s normally Sass-only is valid CSS. In order to maintain CSS compatibility as much as possible, the only Sass construct we allow in those values is interpolation (#{}). (We tried to get the syntax of custom properties to be a little less broad to avoid this, but to no avail.)
However, if Sass can’t tell statically whether a given property is a CSS custom property or just a normal property, it allows SassScript in the value. This is why writing #{--font-family-sans-serif} works differently.
When a Sass value is interpolated, we remove the quotes from quoted strings. This means users can reliably write quoted strings in their Sass code without fear that they’ll be interpreted as colors or whatever, and still include them in selector names without having to manually call unquote(). This is why the quotation marks are disappearing in your code. inspect() converts a value to a string version of its CSS representation, quotes and all, which works around this behavior.

nex3 on Oct 13, 2017

Had the exact same issue, solved it by bumping SASS gem to latest (3.5.6)

ilyador on Jun 24, 2018

My workaround: Not sure its best solution but I was using compass so none of the other solutions worked for me

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

  @each $color, $value in $theme-colors {
  	$new-color: --#{$color};
    #{$new-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)};
}
`

very simple and effective resolve! tnx man!

am35a on Jan 13, 2019

Here is the working solution for me:

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

bgaze on May 6, 2019

I have resolved this problem by installing Sass as a gem (latest gem).

In an Ubuntu 18.04.1 LTS (Vagrant Homestead Virtual machine) I execute:

$ sudo apt-get install -y ruby  
$ sudo gem install sass

If I check the versions:

$ ruby -v
ruby 2.5.3p105 (2018-10-18 revision 65156) [x86_64-linux]

$ which sass
/home/vagrant/.rbenv/shims/sass

$ /home/vagrant/.rbenv/shims/sass -v
Ruby Sass 3.7.2

amieiro on Aug 22, 2019

thanks @waldozevenster I used your workaround.

japo32 on Oct 3, 2018

nex3@ Thank you for the detailed explanation and the inspect suggestion! I believe we now have an acceptable fix on the Bootstrap side that works with both Sass 3.5.2 and libsass. 👍 🎉

glebm on Oct 13, 2017