编写返回字符串的Sass/Scss函数

我正在尝试使用Scss中的两个自定义实用程序函数优化CSS相关的计算

一个用于EMs：

@function _em($wanted, $inherited) {
  @return ($wanted / $inherited) + 'em';
}

…另一个是百分比：

@function _pc($wanted, $parent) {
  @return (($wanted / $parent) * 100) + '%';
}

…然后内联调用它们：

body {
  margin: _pc(40,1024);
  font-size: _em(20,16);
  line-height: _em(26,20);
}

但是，这两个函数都没有返回预期的

Nem

或

N%

字符串。（我认为这是我的字符串连接——也就是说，在计算结束时粘贴单元声明性——但我不确定。）

---

有人能解释一下我做错了什么吗？

事实上，你的问题是混合器的名称。这是我自己发现的，但显然你不能用下划线来开始混音

这项工作：

---

类似地，我编写了这个函数，用于将单位从

px

转换为

rem

您可以相应地修改

$is-pixel: true;
$base-pixel: 16;

@function unit($value) {
  @if $is-pixel == true {
    $value: #{$value}px;
  } @else {
    $value: #{$value/$base-pixel}rem;
  }
  @return $value;
}

现在，我们可以使用如下方法

.my-class {
  width: unit(60);
  height: unit(50);
}

---

谢谢艾曼，不过这有点烦人。我想我只使用pc（x，y）和em（x，y）作为函数名的前缀加上负号可能会对其他开发人员产生误导。对于任何想要这些名称但没有字符串输出的人来说，只要用SASS插值语法包装返回，例如：

@function-px到pc（$wanted，$parent）{@return#{（$wanted/$parent）*100）+'%}}

谢谢，Jasmine，这是最好的解决方案，否则Sass似乎会将计算+串联作为一个带引号的字符串转储为CSS规则值！

.my-class {
  width: unit(60);
  height: unit(50);
}