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

Answer 1

你的功能似乎是正确的。只需确保已使用16px等值定义$base-font-size。

你上面的mixin也应该工作

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

现在你可以致电font-size: em(16px);，它应该可行您也可以使用可选基础调用此函数，有时您可能希望在不是16px的基础上进行计算。

请同时查看http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/以获取rem字体大小。您可能希望跳过em，因为它们存在嵌套问题http://css-tricks.com/why-ems/

有关上述mixin的更详细版本，您可以致电

border: emCalc (10 20 30 40);

如果你不必一次又一次地重复px值而你可能有1到4个值，请查看Zurb基金会中的mixin _global.scss