Sass @if真实陈述不起作用

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