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

Question

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

一个给 EM：

@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%字符串。（我认为这是我的字符串连接 - 即在计算结束时粘合单位声明 - 但我不确定。）

谁能阐明我做错了什么？

Answer 1

实际上，您的问题是mixin的名称。我自己刚刚发现了这一点，但显然你不能用下划线开始一个 mixin。

这有效：http: //jsfiddle.net/B94p3/

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

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

p {
    font-size: -em(40,16);
}

Answer 2

同样，我编写了这个函数来将单位从 转换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);
}