0

Currently I have this code (working fine):

$RESOURCE_URL: 'https://res.cloudinary.com/xxx/image/upload';

background-image: url('#{$RESOURCE_URL}/abc.jpg');

Now, I am planning to differentiate the RESOURCE_URL based on a variable from backend. I know that scss variables are just a syntactic sugar and they won't exist at runtime. So, I want to replace it with css custom property so that I can change its value at runtime.

Here is the new code with css custom property (not-working):

--resource-url: 'https://res.cloudinary.com/xxx/image/upload';

background-image: url('#{var(--resource-url)}/abc.jpg');

But this is not working. It gives me a compile time error:

Can't resolve './var(--resource-url)/abc.jpg'
Vishal
  • 6,238
  • 10
  • 82
  • 158
  • you cannot do this with CSS variables – Temani Afif Feb 08 '21 at 09:32
  • @TemaniAfif is there any other way? – Vishal Feb 08 '21 at 09:32
  • not with CSS, you will need JS – Temani Afif Feb 08 '21 at 09:34
  • @TemaniAfif so for each resource, I will need to use JS? or can I have any other common solution for that? – Vishal Feb 08 '21 at 09:35
  • The linked question as duplicate does not answer my particular question. Anyone who has marked it as duplicate, I would like to say that other question is suggesting to use a static URL, but my URL is dynamically constructed. – Vishal Feb 08 '21 at 09:37
  • *I would like to say that other question is suggesting to use a static URL, but my URL is dynamically constructed.* --> even a static URL won't work with CSS variables so imagine the case with dynamic one. – Temani Afif Feb 08 '21 at 09:40

0 Answers0