从函数返回一个参数时如何进行长度算术？

Question

a：用单位添加两个长度是可以的 b：函数返回单位长度 c：将此函数的结果添加到具有相同单位的长度是不正确的。

@function px2vw($px) {
  @return #{$px / 1200 * 100}vw;
}

.abc {
  a: 50vw + 2vw;
  b: px2vw(600);
  c: px2vw(600) + 2vw;
}

// output    
.abc {
  a: 52vw;
  b: 50vw;
  c: 50vw2vw;    // bad
}



// want
.abc {
  a: 52vw;
  b: 50vw;
  c: 52vw;
}

Answer 1

示例c中的数学运算无法正确执行，因为Sass将52vw插值为字符串而不是52个视口宽度单位。这是因为您手动将字母vw添加到函数的输出中。

相反，您可以像这样转换为函数中的vw单位。这将有您想要的输出：

@function px2vw($px) {
  @return $px / 1200 * 100vw;
}

.abc {
  a: 50vw + 2vw;
  b: px2vw(600);
  c: px2vw(600) + 2vw;
}

返回：

.abc {
  a: 52vw;
  b: 50vw;
  c: 52vw;
}