Sass @if true function not working function

Question

Sto provando a creare una funzione che converta una dimensione in pixel in ems o rems. La funzione è la seguente:

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

Quando compilo questo ottengo il seguente errore:

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

Che cosa sto facendo male qui?

Answer 1

SASS dispone di block scope, le variabili definite in un blocco saranno disponibili solo in tale ambito. Così si desidera utilizzare $ unità al di fuori del blocco if-else, così si dovrebbe dichiarare in questo modo:

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

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

Answer 2

In questo caso particolare, si consiglia di utilizzare la funzione di if(), piuttosto che un @if dichiarazione

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

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