如果在 @return 指令上出现错误结果，则 Scss 三元

Question

我有以下功能：

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

然后我用了map中的函数：

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

但我没有得到预期的结果。我得到：

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

中缀，其实应该去掉'lg'

Answer 1

您在 if 之后还有一个额外的 space：if ($。这里if只是一个函数调用。

if 函数可能实现的示例：

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;
}

Sass大师 demo.

如果在 @return 指令上出现错误结果，则 Scss 三元

Scss ternary if on a @return directive bad result

sass

node-sass