New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compiler doesn't like Bootstrap 4 _root.scss #2383

Closed
insad opened this Issue Oct 3, 2017 · 21 comments

Comments

Projects
None yet
@insad
Copy link

insad commented Oct 3, 2017

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>'
*/
@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Oct 3, 2017

This is a bug in our implementation—the parser shouldn't crash—but those Bootstrap styles aren't valid for Sass 3.5 as written. See the backward incompatibilities section of the changelog for Sass 3.5.

@nex3 nex3 added the Bug label Oct 3, 2017

nex3 added a commit to sass/sass-spec that referenced this issue Oct 3, 2017

Add more specs for custom property interpolation
This adds specs for interpolating the name of the property.

See sass/sass#2383

nex3 added a commit that referenced this issue Oct 3, 2017

Fix custom property interpolation
Interpolation that included the full property name (such as --#{foo})
was crashing the parser.

Closes #2383

@nex3 nex3 closed this in #2384 Oct 4, 2017

nex3 added a commit to sass/sass-spec that referenced this issue Oct 4, 2017

Add more specs for custom property interpolation (#1169)
This adds specs for interpolating the name of the property.

See sass/sass#2383

nex3 added a commit that referenced this issue Oct 4, 2017

Fix custom property interpolation (#2384)
Interpolation that included the full property name (such as --#{foo})
was crashing the parser.

Closes #2383
@glebm

This comment has been minimized.

Copy link
Contributor

glebm commented Oct 12, 2017

@nex3 What should this be to work with Sass 3.5? Ideally, older versions as well.

glebm added a commit to twbs/bootstrap-rubygem that referenced this issue Oct 12, 2017

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+ due to

sass/sass#2383

This commit removes compass support and bumps minimum Ruby Sass version
to v3.5.2.

glebm added a commit to twbs/bootstrap-rubygem that referenced this issue Oct 12, 2017

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+ due to

sass/sass#2383

This commit removes compass support and bumps minimum Ruby Sass version
to v3.5.2.

glebm added a commit to twbs/bootstrap that referenced this issue Oct 12, 2017

@glebm

This comment has been minimized.

Copy link
Contributor

glebm commented Oct 12, 2017

@nex3 Is this the correct fix for Sass v3.5 compatibility? twbs/bootstrap#24354

@glebm

This comment has been minimized.

Copy link
Contributor

glebm commented Oct 12, 2017

The above fix resulted in incorrect output with both Sass 3.5.2 and latest libsass:

This is the output diff from twbs/bootstrap@6f7bad6, the quotes are gone:

-  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }

I had to change the font variables like this to get it to work. Seems like a bug (in the spec) that this makes a difference.

-  --font-family-sans-serif: #{$font-family-sans-serif};
-  --font-family-monospace: #{$font-family-monospace};
+  #{--font-family-sans-serif}: $font-family-sans-serif;
+  #{--font-family-monospace}: $font-family-monospace;

@sass sass deleted a comment from glebm Oct 13, 2017

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Oct 13, 2017

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.

glebm added a commit to twbs/bootstrap that referenced this issue Oct 13, 2017

@glebm

This comment has been minimized.

Copy link
Contributor

glebm commented Oct 13, 2017

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 added a commit to twbs/bootstrap that referenced this issue Oct 14, 2017

@lpsBetty

This comment has been minimized.

Copy link

lpsBetty commented Jan 24, 2018

Just for the ones who come here. I replaced compass with node-sass and it worked :)

@mittalyashu

This comment has been minimized.

Copy link

mittalyashu commented Feb 7, 2018

What if we are using Google Fonts?

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

In that we only get this much: font-family: 'Roboto', sans-serif;

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Feb 8, 2018

@mittalyashu What's the problem there exactly?

@mittalyashu

This comment has been minimized.

Copy link

mittalyashu commented Feb 9, 2018

@nex3, I am not getting any kind of error, I am asking generally.

https://www.useloom.com/share/1e0ac486103140ec99a5f3bcee88b403

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Feb 24, 2018

That may be a better question for the Bootstrap team, but my understanding is that if you set

$font-family-sans-serif: 'Roboto', sans-serif;

before you import Bootstrap, it'll work properly.

xzyfer added a commit to sass/sass-spec that referenced this issue Mar 23, 2018

@Smile3D

This comment has been minimized.

Copy link

Smile3D commented May 9, 2018

Hi there, I have a issues with my sass Bootstrap 4 build:

: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 #2383 (comment)
--font-family-sans-serif: #{inspect($font-family-sans-serif)}
--font-family-monospace: #{inspect($font-family-monospace)}


This code doesnt work and my Gulp build show error https://monosnap.com/file/bwqk4QTYy2CvYBqw9oNwGVSnoFQpgQ

What I did wrong? Thx all.

gmacdougall pushed a commit to gmacdougall/solidus that referenced this issue May 14, 2018

Gregor MacDougall
Require sass >= 3.5.2
Bootstrap 4.x requires at least sass 3.5.2.

For more information see:
twbs/bootstrap-rubygem#122
sass/sass#2383

jhawthorn added a commit to solidusio/solidus that referenced this issue May 15, 2018

Require sass >= 3.5.2
Bootstrap 4.x requires at least sass 3.5.2.

For more information see:
twbs/bootstrap-rubygem#122
sass/sass#2383

jgayfer added a commit to jgayfer/solidus that referenced this issue May 15, 2018

Require sass >= 3.5.2
Bootstrap 4.x requires at least sass 3.5.2.

For more information see:
twbs/bootstrap-rubygem#122
sass/sass#2383

benjaminwil added a commit to benjaminwil/solidus that referenced this issue May 17, 2018

Require sass >= 3.5.2
Bootstrap 4.x requires at least sass 3.5.2.

For more information see:
twbs/bootstrap-rubygem#122
sass/sass#2383
@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented May 20, 2018

@Smile3D This is a great question for the Sass StackOverflow community! We try to keep this issue tracker focused on bugs and feature requests that need the core team's attention in particular, while requests for support are usually better handled by the community at large.

@jcpc91

This comment has been minimized.

Copy link

jcpc91 commented Jun 13, 2018

so here we are 2018 and a can't fix this error

body:before {
white-space: pre;
font-family: monospace;
content: "Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";"\A on line 4 of node_modules/bootstrap/scss/_root.scss\A from line 11 of node_modules/bootstrap/scss/bootstrap.scss\A from line 3 of scss/buap-theme.scss\A \A 1: :root {\A 2: // Custom variable values only support SassScript inside #{}.\A 3: @each $color, $value in $colors {\A 4: --#{$color}: #{$value};\A 5: }\A 6: \A 7: @each $color, $value in $theme-colors {\A 8: --#{$color}: #{$value};\A 9: }"; }

i have two macs and both install sass
brew install --devel sass/sass/sass

one macs works find

if a execute :
brew -v

Homebrew 1.6.8 (both macs have the same version)

MAC 1:
sass --version

1.5.1 compiled with dart2js 2.0.0-dev.59.0

MAC 2:
sass -v

Sass 3.5.1 (Bleeding Edge)

with MAC 1 works fine but in MAC 2 fail

someone knows how to fixed?
thanks

@nex3

This comment has been minimized.

Copy link
Contributor

nex3 commented Jun 13, 2018

@jcpc91 That's also a great question for StackOverlow!

@ilyador

This comment has been minimized.

Copy link

ilyador commented Jun 24, 2018

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

@waldozevenster

This comment has been minimized.

Copy link

waldozevenster commented Jul 5, 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)};
}
`
@japo32

This comment has been minimized.

Copy link

japo32 commented Oct 3, 2018

thanks @waldozevenster I used your workaround.

@Eetheart

This comment has been minimized.

Copy link

Eetheart commented Nov 9, 2018

@waldozevenster Sweet, this workaround works perfectly! Thank you!

@amieiro

This comment has been minimized.

Copy link

amieiro commented Nov 21, 2018

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  
$ 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
@am35a

This comment has been minimized.

Copy link

am35a commented Jan 13, 2019

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment