0
.container {
  --random: 200px;

  @mixin test() {
    @if (var(--random) > 500px) {
      color: orange;
    }
  }

  @include test();
}

What I want: if the variable is larger than 500px, style .container with color: orange;.

P.S. I wasn't sure how to make a code-snippet that to reproduce this error for you. Perhaps there's a website to make little SASS snippets you could suggest?

tonitone120
  • 1,920
  • 3
  • 8
  • 25
  • You can't use `var()` in `@if`. If you paste your code in https://www.sassmeister.com/ you'll get an undefined-operation error. – Dai Jan 09 '21 at 02:40
  • `--random` is a CSS Custom Property, not a SASS/SCSS variable. – Dai Jan 09 '21 at 02:41
  • @Dai Gutted. Thanks for the link. There's no SASS conditional logic that allows for CSS variables is there? – tonitone120 Jan 09 '21 at 02:46
  • 1
    I think you need to understand how SCSS Variables work compared to CSS Custom Properties. – Dai Jan 09 '21 at 03:15
  • related: https://stackoverflow.com/q/56669587/8620333 (what you want to do cannot be done with CSS variable or SASS, either JS or read the answer I linked) – Temani Afif Jan 09 '21 at 08:01

1 Answers1

1

As Dai pointed out in the comments, there is a difference between SASS variables and custom properties (aka CSS variables). In your case, you should use a SASS variable:

.container {
  $random: 200px;

  @mixin test() {
    @if ($random > 500px) {
      color: orange;
    }
  }

  @include test();
}
Arkellys
  • 5,562
  • 2
  • 16
  • 40
  • Not possible to use a SASS variable in my case. I make a CSS variable that captures a certain element's width every-time the screen's resized. Have moved onto other solutions – tonitone120 Jan 09 '21 at 07:08
  • Ah, then the condition couldn't work anyway since it exists only before the compilation. – Arkellys Jan 09 '21 at 07:15