Sass to css issue

1
Hi there, I’m using CSS Custom Properties instead of SASS variables to specify the colors for different theming on our apps. for example: I define two sets of properties one for white theme and one for black theme: .white-theme{ --background-color: #fff; --font-color: #000; } And .black-theme{ --background-color: #000; --font-color: #fff; }   Then I create my buildingblocks and refer to de variables I've set: .buildingblock{ background-color: var(--background-color); font-color: var(--font-color) }   This works fine for background-colors and font-color etc. But when I wan to use gradiens like backgound-image: linear-gradient (to bottom right, #000, #fff); and i make a propperty like --gradient: linear-gradient (to bottom right, #000, #fff);  It doesn't apply. In the inspector I only see my defined property: var(--linear-gradient), not the value it is supposed to use. Is this due to Calypso perhaps? I'm using 8.18.1
asked
3 answers
0

And in Calypso you get the feedback that the new styling is succesfully injected into the browser?

answered
0

Hi Emmy,

What happens when you compile this with another SASS compiler like Koala?

Cheers,

Jeffrey

answered
0

Hi Emmy, 

This can work for your background. Make sure the is no spaces in in the liner-gradient function

 

backgound-image: linear-gradient (to bottom right, #000, #fff); // Error

backgound-image: linear-gradient(to bottom right, #000, #fff) // No spaces 

:root {
  --dark-color: blue;
  --light-color: yellow;
  --gradient: linear-gradient(
    to right bottom,
    var(--dark-color),
    var(--light-color)
  );
}

.buildingblock {
  background: var(--gradient);
}

 

 

answered