Click here to Skip to main content
14,269,202 members
Rate this:
Please Sign up or sign in to vote.
See more:
This works as expected:

:root { --stop1: #aaaaaa; --stop2: #666666; }

	background-image: radial-gradient( ellipse at top right, var(--stop1), var(--stop2) );

However, what I would like to do it put the colour 'constants' in a separate 'colour.css' file. But this doesn't seem to work.

Can this be done? I thought the whole point of CSS variables was to allow things like colours to be placed in one central location. What am I doing wrong?

What I have tried:

I have tried changing the order of the stylesheet link references in the HTML file that uses this CSS.

I have also tried importing the 'colours.css' file into the stylesheet that defines the radial gradient, like this:

@import "colour.css";

	background-image: radial-gradient( ellipse at top right, var(--stop1), var(--stop2) );

In both these cases, the HTML document acts as though the colours are not found.
MadMyche 7-May-19 11:10am
What does the developer toolset say for network activity?
Patrick Skelton 8-May-19 4:13am
Thank you for the reply. I haven't checked network activity, as you suggest, for the simple bizarre reason that it is suddenly working. I moved on to working on something else, so I guess I must have fixed it by accident, which more than likely means I had some CSS rules in the wrong order. I'm also guilty of not committing to source control frequently enough, so I'm not even sure how I fixed it. (Is there a delete button for poor questions?) :~

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100