css - sass中的cos函数返回未定义的操作错误

Question

@if ($nav-position == "bottom-right") {
    @if ($n == "first") {
      transform: translate(-$r, 0);
    } @else if ($n == "last") {
      transform: translate(0, -$r);
    } @else {
      transform: translate(floor(-$r * cos($theta)), floor(-$r * sin($theta)));
    }
  }

这样不行，请问是什么原因呢？我尝试使用终端或 GUI cilent 编译它，两者都给了我同样的错误:

Answer 1

我认为您以错误的顺序传递值，我尝试重现该错误。

将此代码粘贴到 SassMeister 上以方便检查

SASS 代码

@mixin transform($r, $theta, $n: 'first' ,$nav-position: 'bottom-right' ) {
  @if ($nav-position == 'bottom-right') {
    @if ($n == 'first') {
      transform: translate(- $r, 0);
    } 
    @else if ($n == 'last') {
      transform: translate(0, - $r);
    } 
    @else {
      transform: translate(floor(-$r * cos($theta)), floor(-$r * sin($theta)));
    }
  }
}


// First IF 'bottom-right' TRUE

  // IF

h1 {
  @include transform(5, 1)
}  

 // ELSE IF  'FIRST' 
h2 {
  @include transform(5, 1, 'first')
}

 // ELSE IF  'LAST' 
h3 {
  @include transform(5, 1, 'last')
}

 // ELSE
h4 {
  @include transform(5, 1, 'else')
}

 // NOTHING IS PRINTED
h5 {
  @include transform(5, 1, 'else', 'yeka')
}

 // ERROR APPEARS WHEN YOU PASS THE PARAM IN A WRONG ORDER
 // UNCOMMENT TO CHECK IT

 /*

h6 {
  @include transform('144px', 5, 1)
} */

CSS 输出

h1 {
  transform: translate(-5, 0);
}

h2 {
  transform: translate(-5, 0);
}

h3 {
  transform: translate(0, -5);
}

h4 {
  transform: translate(-3, -5);
}

取消注释 H6 规则时的 CSS 错误

Undefined operation: "-"144px" times 0.28366".

如你所见，我用 4 个参数创建了一个 mixin

$r
$theta
$n
$nav-position

最后两个有一个默认值，便于维护， 一切都按预期工作，但在最后一个示例中(h6 标题的注释) 当您取消注释时，您会看到您的错误。我试图将“144px”值作为第一个参数传递，但应该是第三个。所以一切都崩溃了，因为 $r 和 $theta 必须是一个 NUMBER 而不是一个字符串

如果问题出在 ELSE 情况下，那么问题出在单位上，use unitless function 用于执行 cos 或 sin 函数之前的 $theta 和 $r 值。 但是你必须确保你传递的是相同的单位，例如 px 和 px，而不是 px 和 rem。 或者您可以创建并嵌套另一个函数来检查这些情况