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
4 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
0

The issue lies in the fact that custom properties cannot hold complex data types like gradients directly. They can only hold simple values like colors, dimensions, or strings. When you set --gradient to linear-gradient (to bottom right, #000, #fff), it is treated as a string value rather than a valid gradient.

Therefore

You have few option

Use the gradient declaration directly in your building block.

.buildingblock {
  background-image: linear-gradient(to bottom right, #000, #fff);
}

Define separate custom properties for each gradient color stop.

.white-theme {
  --gradient-start-color: #000;
  --gradient-end-color: #fff;
}

.black-theme {
  --gradient-start-color: #fff;
  --gradient-end-color: #000;
}

.buildingblock {
  background-image: linear-gradient(to bottom right, var(--gradient-start-color), var(--gradient-end-color));
}

hope this helps you.

answered