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

insad · 2017-10-03T14:55:34Z

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 · 2017-10-03T22:21:46Z

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.


        Add more specs for custom property interpolation

This adds specs for interpolating the name of the property. See sass/sass#2383


        Fix custom property interpolation

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


        Add more specs for custom property interpolation (#1169)

This adds specs for interpolating the name of the property. See sass/sass#2383


        Fix custom property interpolation (#2384)

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

glebm · 2017-10-12T22:17:27Z

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


        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.


        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.


        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-read and sass/sass#2383

glebm · 2017-10-12T23:00:24Z

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


        Add a spec for custom vars with an #{interp} value

See sass/sass#2383

glebm · 2017-10-12T23:26:45Z

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;

nex3 · 2017-10-13T04:45:29Z

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.


        Use `inspect` for fonts as per nex3@'s comment

sass/sass#2383 (comment)

glebm · 2017-10-13T10:32:08Z

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. 👍 🎉


        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----must-read and sass/sass#2383

lpsBetty · 2018-01-24T10:11:11Z

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

mittalyashu · 2018-02-07T13:25:10Z

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 · 2018-02-08T19:45:39Z

@mittalyashu What's the problem there exactly?

mittalyashu · 2018-02-09T08:15:06Z

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

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

nex3 · 2018-02-24T00:20:17Z

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.


        Add a spec for custom vars with an #{interp} value

See sass/sass#2383

Smile3D · 2018-05-09T20:49:52Z

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.


        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


        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 · 2018-05-20T13:55:20Z

@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 · 2018-06-13T03:30:09Z

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 · 2018-06-13T18:46:01Z

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

ilyador · 2018-06-24T13:15:30Z

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

waldozevenster · 2018-07-05T15:16:53Z

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 · 2018-10-03T20:58:20Z

thanks @waldozevenster I used your workaround.

Eetheart · 2018-11-09T22:26:09Z

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

amieiro · 2018-11-21T15:21:40Z

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

am35a · 2019-01-13T11:28:01Z

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!

thany · 2019-03-01T13:07:34Z

@nex3

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.

How can it not tell? The sass parser is outputting the property name, so how can it not know what it's outputting there? Especially in the example you gave, it feels silly that the parser doesn't know what the expression in the #{} is going to do. It's a constant, for lack of a better term. It can only ever output one thing.

nex3 · 2019-03-01T23:29:51Z

How can it not tell? The sass parser is outputting the property name, so how can it not know what it's outputting there?

The difference in behavior comes from how the property is parsed, not how it's evaluated. At parse-time, Sass has no knowledge of what the output of a given expression is, because it hasn't started executing any statements yet. We need to determine whether a property is a custom property or not at parse time because custom properties have very different syntax than normal properties. For example, @#$%^&*+=|~ is a completely valid and potentially meaningful custom property value, but it's not a valid value for any normal CSS property or for a Sass expression.

Especially in the example you gave, it feels silly that the parser doesn't know what the expression in the #{} is going to do. It's a constant, for lack of a better term. It can only ever output one thing.

Yes, in theory, we could have special logic in the parser to check if the entire property name is an interpolation containing an unquoted string that begins with --. But adding special logic like that makes the behavior of Sass much more complex to describe, understand, and implement; it's much simpler to draw a clean line and say "a declaration is parsed as a custom property if and only if it begins with a raw --".

bgaze · 2019-05-06T11:00:16Z

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

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

Loading status checks…

dd8bb66

This adds specs for interpolating the name of the property. See sass/sass#2383

This was referenced Oct 3, 2017

Add more specs for custom property interpolation sass/sass-spec#1169

Merged

Fix custom property interpolation #2384

Merged

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

Fix custom property interpolation

Loading status checks…

5974033

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

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)

Loading status checks…

7edb57e

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)

Loading status checks…

139e86e

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

nex3 mentioned this issue Oct 12, 2017

Custom variable interpolation does not work in @each #2386

Closed

glebm mentioned this issue Oct 12, 2017

Drop Compass support, bump minimum Sass version #122

Merged

glebm mentioned this issue Oct 12, 2017

Escape SassScript in custom variable values #24354

Merged

glebm added a commit to glebm/sass-spec that referenced this issue Oct 12, 2017

Add a spec for custom vars with an #{interp} value

7245850

See sass/sass#2383

glebm mentioned this issue Oct 12, 2017

Add a spec for custom vars with an #{interp} value #1170

Merged

sass deleted a comment from glebm Oct 13, 2017

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

Use `inspect` for fonts as per nex3@'s comment

5ab3552

sass/sass#2383 (comment)

tagliala mentioned this issue Oct 22, 2017

Add support for Sass 3.5 #877

Closed

mittalyashu mentioned this issue Feb 25, 2018

What if we are using Google Fonts? #25710

Closed

benlindsay mentioned this issue Mar 18, 2018

Problems compiling Bootstrap 4 #504

Closed

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

Add a spec for custom vars with an #{interp} value

Loading status checks…

b79b609

See sass/sass#2383

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

Require sass >= 3.5.2

b8ce8be

Bootstrap 4.x requires at least sass 3.5.2. For more information see: twbs/bootstrap-rubygem#122 sass/sass#2383

gmacdougall mentioned this issue May 14, 2018

Require sass >= 3.5.2 #2734

Merged

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

Require sass >= 3.5.2

5283039

Bootstrap 4.x requires at least sass 3.5.2. For more information see: twbs/bootstrap-rubygem#122 sass/sass#2383

glebm mentioned this issue Feb 20, 2019

Sass variable in CSS variable outputted literally #2835

Closed

sass / sass

Join GitHub today

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

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

Comments

insad commented Oct 3, 2017

This comment has been minimized.

nex3 commented Oct 3, 2017

This comment has been minimized.

glebm commented Oct 12, 2017

This comment has been minimized.

glebm commented Oct 12, 2017

This comment has been minimized.

glebm commented Oct 12, 2017 • edited

This comment has been minimized.

nex3 commented Oct 13, 2017

This comment has been minimized.

glebm commented Oct 13, 2017

This comment has been minimized.

lpsBetty commented Jan 24, 2018

This comment has been minimized.

mittalyashu commented Feb 7, 2018

This comment has been minimized.

nex3 commented Feb 8, 2018

This comment has been minimized.

mittalyashu commented Feb 9, 2018

This comment has been minimized.

nex3 commented Feb 24, 2018

This comment has been minimized.

Smile3D commented May 9, 2018 • edited

This comment has been minimized.

nex3 commented May 20, 2018

This comment has been minimized.

jcpc91 commented Jun 13, 2018 • edited

This comment has been minimized.

nex3 commented Jun 13, 2018

This comment has been minimized.

ilyador commented Jun 24, 2018

This comment has been minimized.

waldozevenster commented Jul 5, 2018

This comment has been minimized.

japo32 commented Oct 3, 2018

This comment has been minimized.

Eetheart commented Nov 9, 2018 • edited

This comment has been minimized.

amieiro commented Nov 21, 2018 • edited

This comment has been minimized.

am35a commented Jan 13, 2019

This comment has been minimized.

thany commented Mar 1, 2019 • edited

This comment has been minimized.

nex3 commented Mar 1, 2019

This comment has been minimized.

bgaze commented May 6, 2019 • edited

glebm commented Oct 12, 2017 •

edited

Smile3D commented May 9, 2018 •

edited

jcpc91 commented Jun 13, 2018 •

edited

Eetheart commented Nov 9, 2018 •

edited

amieiro commented Nov 21, 2018 •

edited

thany commented Mar 1, 2019 •

edited

bgaze commented May 6, 2019 •

edited