Scss ternary if on a @return directive bad result

Question

I have the following function:

@function breakpoint-infix($bp) {
  @return if ($bp != 'lg', '--#{$bp}', '');

Then I used the function in a map:

.dp {
  @each $bp in map-keys($grid-config) {
      $infix: breakpoint-infix($bp);
      &-none#{$infix} {
        display: none !important;
      }} }

but I don't get the expected result. I get:

.u-dp-noneif false, .u-dp --lg {
  display: none !important; }

The infix, actually should remove 'lg'

Answer 1

You have an extra space after if: if ($. Here if is just a function call.

An example of the if function possible realization:

Sass:

@function user-if($condition, $true-statement, $false-statement) {
  $output: $false-statement;

  @if ($condition) {
    $output: $true-statement;
  }

  @return $output;
}

a {
  color: user-if(true, green, red);
  z-index: user-if(false, 1, 2);
}

Css:

a {
  color: green;
  z-index: 2;
}

Sassmeister demo.