function - Sass @if true 语句不起作用

Question

我正在尝试制作一个将像素大小转换为 ems 或 rems 的函数。功能如下：

@function px2em($pixels, $fontSize: 16, $rem: false) {
    @if $rem == true {
        $unit: 0rem;
    } @else {
        $unit: 0em;
    }
    $ratio: 1 / $fontSize;
    @return ($pixels * $ratio) + $unit;
}

当我编译这个时，我得到以下错误：

error style.scss (Line 36 of _functions.scss: Undefined variable: "$unit".)

我在这里做错了什么？

Answer 1

SASS 具有block scope，在一个块中定义的变量将仅在该范围内可用。所以你想在 if-else 块之外使用 $unit ，所以你应该像这样声明它：

@function px2em($pixels, $fontSize: 16, $rem: false) {
    $unit: 0em;

    @if $rem == true {
        $unit: 0rem;
    }
    ...
}

Answer 2

在这种特殊情况下，您可能想要使用if()函数，而不是@if语句

$unit: if($rem, 0rem, 0em);

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#if-instance_method