Sass @if tuyên bố thực sự không hoạt động chức năng

Question

Tôi đang cố gắng thực hiện một chức năng chuyển đổi kích thước pixel thành ems hoặc rems. Các chức năng như sau:

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

Khi tôi biên dịch này, tôi nhận được lỗi sau:

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

Tôi đang làm gì sai ở đây?

Answer 1

SASS có block scope, các biến được xác định trong một khối sẽ chỉ có sẵn trong phạm vi đó. Vì vậy, bạn muốn sử dụng $ đơn vị bên ngoài của khối if-else, vì vậy bạn nên khai báo nó như thế này:

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

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

Answer 2

Trong trường hợp đặc biệt này, bạn có thể muốn sử dụng if() chức năng, chứ không phải là một @if tuyên bố

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

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