Question

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

任何人都可以解释我做错了什么吗？

Answer 1

实际上，你的问题是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);
}

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

2 个答案: