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?

Just so you know the sass-rails gem uses the Ruby Sass interpreter that's was EOL 26 March 2019. The only currently supported Sass compiler is Dart-Sass. — max
– max, Commented May 11, 2024 at 18:52
it's dont works when change to dart-sass, many others problems appear... — Matrix
– Matrix, Commented May 12, 2024 at 20:58

Matrix · Accepted Answer · 2024-05-13 14:32:38Z

0

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%)"}

answered May 13, 2024 at 14:32

Matrix

3,3956 gold badges46 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related