sass - 在 SASS 而不是 SCSS 中创建 em 转换器功能

Question

我是 SASS 和 Compass 的新手，试图创建一个可以将传递的像素值转换为 em 的函数。我找到了一个教程，但它适用于 SCSS，不适用于 SASS。

即使我已经在 SASS 网站上查看过，但似乎他们有大多数 SCSS 文档，而不是他们为 SASS 描述的所有内容。

这是我正在写的

@function em($px, $base: 24px)
    @return ($px / $base) * 1em

在我的项目中也使用vertical-rythem并尝试了这个，但再次给出错误$base-font-size

@function em($px, $base: $base-font-size)
    @return ($px / $base) * 1em

所以当我用它作为

font-size: em(16px)

它应该转换为1em输出

score 1 · Accepted Answer

您拥有的功能似乎是正确的。只需确保您已经定义$base-font-size了一个值，例如 16px。

您拥有的上述mixin也应该可以工作

$base-font-size: 16px;
@function em($px, $base: $base-font-size) {
@return ($px / $base ) * 1em; 
}

现在你可以调用font-size: em(16px);它，它应该可以工作你也可以用一个可选的基数调用这个函数，有时你可能想在一个不是 16px 的基数上计算。

有关上述 mixin 的更详细版本，您可以在其中调用

border: emCalc (10 20 30 40);

如果您不必一次又一次地重复 px 值并且您可能有 1 到 4 个值，请检查 Zurb 基础中的 mixin_global.scss

1 回答 1