Unable to use CSS Custom Properties (aka CSS Variables) with SASS @if Statement

Question

I'm trying to pass some CSS Custom Properties to a SASS Mixin. I'm able use the variables when applied directly in the styling I want. But when I try to use a variable in an If statement, it doesn't work.

Mixin Example:

@mixin bg-color($hue, $status) {
  background: hsl($hue, 50%, 50%); // $hue works as expected

  @if $status == 'danger' { // doesn't work!
    color: 'red';
  } @else if $status == 'warning' { // doesn't work!
    color: 'orange';
  } @else { // always enters the else branch
    color: 'black';
  }
}

CSS:

:root {
    --hue: 195;
    --status: 'default';
}

.demo {
    @include bg-color(var(---hue), var(---status));
}

If I manually add the status value to the mixin, it works:

.demo {
    @include bg-color(var(---hue), 'danger');
}

Any idea what might be the issue?

UPDATE: As @temani-afif mentioned, this approach isn't possible because SASS files are compiled before CSS variables are used.

this is impossible, SASS is a preprocessor and CSS variables comes later at running time — Temani Afif
– Temani Afif, Commented Nov 18, 2020 at 21:24

Dima Malko · Accepted Answer · 2020-11-19 07:41:29Z

1

If you have some file, where you import all SCSS files, it depends which is imported first and which are imported after.

Make sure that one that you need to be Read by VS is first.

For example i needed to read first my variables, so it have to be first, other way, my code read mixin, and doesnt know yet what is '$blue'.

answered Nov 19, 2020 at 7:41

Dima Malko

3334 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Unable to use CSS Custom Properties (aka CSS Variables) with SASS @if Statement

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