cos函数在sass中返回undefiend操作错误

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 CODE

@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 OUTPUT

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

并且最后2个具有易于维护的默认值， 一切都按预期工作，但在最后一个例子中（h6标题的注释） 取消注释后，您会看到错误。我试图将'144px'值作为第一个参数传递，但应该是第三个参数。所以一切都崩溃，因为 $ r 和 $ theta 必须是一个数字，而是得到一个字符串

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