Setting SASS variable to CSS3 variable causes error in Bootstrap 4

Question

StackBlitz link

For some reason when setting Bootstrap variables to a CSS3 variables my Angular 6 app breaks with the following error

This is indeed the first usage of the SCSS variable in the bootstrap file, so it is obviously not happy with how I am setting it. I have made a very simple StackBlitz to replicate the issue. Have a look at the styles.scss.

Essentially this is what produces this error.

styles.scss

:root{
  --primary: #0f0;
}

$primary: var(--primary); // Broken
// $primary: #f00;  // Working

@import '../bootstrap/scss/bootstrap';

Any ideas on why Bootstrap may not be happy with this?

Any chance you could provide an example? Will mess around a bit now. Thanks. — Matthew Mullin
– Matthew Mullin, Commented Sep 6, 2018 at 9:49
And what is the purpose of this? since you have a CSS variable why introducing a SCSS variable? — Temani Afif
– Temani Afif, Commented Sep 6, 2018 at 9:50
Trying to use angular fileReplacment to dynamically change the theme depending on the environment. And bootswatch needs these SCSS variables. See this stackoverflow.com/questions/52184282/… — Matthew Mullin
– Matthew Mullin, Commented Sep 6, 2018 at 9:56

Matthew Mullin · Accepted Answer · 2018-09-06 12:30:45Z

1

Found the answer.

It appears you cannot use css variables within SASS functions due to the dynamic nature of css variables together with the fact that sass is a preprocessor.

See this stack for a more detailed explanation.

answered Sep 6, 2018 at 12:30

Matthew Mullin

7,6864 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting SASS variable to CSS3 variable causes error in Bootstrap 4

StackBlitz link

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

StackBlitz link

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related