how using css variable with SASS rails interpreter? (conflict)

Question

I'm using sass-rails gem and I try to use css variable like this :

  --h: 198
  --l: 38%
  --c: hsl(var(--h), 100%, var(--l))
  background-image: linear-gradient(to right, var(--c) 0%, #000 100%)

error:

ActionView::Template::Error ($hue: "var(--h)" is not a number for `hsl'):

I think sass try to interpreted "var(--h)"... how can say "no interpretation" like `var test` in coffeescript for exemple ?

Do you have some solution for do something simple like this?

Answer 1

find solution :

      --h: 300
      $c:  #{"hsl(var(--h), 20%, 10%)"}
      $c1: #{"hsl(var(--h), 70%, 40%)"}
      $c2: #{"hsl(var(--h), 90%, 35%)"}
      background: #{"radial-gradient(circle at -40% -60%, #{$c1}, transparent 100%),radial-gradient(circle at 200% 180%, #{$c2}, transparent 100%),radial-gradient(circle at 50% 50%, #{$c}, #{$c} 100%)"}