And in Calypso you get the feedback that the new styling is succesfully injected into the browser?
Hi Emmy,
What happens when you compile this with another SASS compiler like Koala?
Cheers,
Jeffrey
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);
}
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.