Sass bỏ qua các biến, quy định tại if-tuyên bố

Question

Tôi có một file có tên style.scss với đoạn mã sau:

@import 'variables'; 

body { 
    color: $text-color; 
    background: $background-color; 
} 

Và một phần tên _variables.scss:

$colorscheme: white; 

@if $colorscheme == white { 
    $text-color: #333; 
    $background-color: #fff; 
} 
@else { 
    $text-color: #ccc; 
    $background-color: #333; 
} 

Các if- tuyên bố hoạt động đúng, nhưng các biến được xác định bên trong, không hoạt động. Khi tôi cố gắng biên dịch, tôi tiếp tục nhận được:

Syntax error: Undefined variable: “$text-color”.

Answer 1

Điều đó hoàn toàn được mong đợi. Các biến có phạm vi cho chúng. Nếu bạn xác định chúng bên trong một khối điều khiển (như một câu lệnh if), thì chúng sẽ không có sẵn bên ngoài. Vì vậy, những gì bạn cần làm là khởi tạo nó ở bên ngoài như vậy:

$text-color: null; 
$background-color: null; 
@if $colorscheme == white { 
    $text-color: #333; 
    $background-color: #fff; 
} 
@else { 
    $text-color: #ccc; 
    $background-color: #333; 
} 

Hoặc ...

$text-color: #ccc; 
$background-color: #333; 
@if $colorscheme == white { 
    $text-color: #333; 
    $background-color: #fff; 
} 

Mặc dù nó sẽ ít tiết để sử dụng chức năng if() như thế này:

$text-color: if($colorscheme == white, #333, #ccc); 
$background-color: if($colorscheme == white, #fff, #333); 

Answer 2

Mặc dù ví dụ này thậm chí còn là nhiều chi tiết hơn tiết, nó giúp loại bỏ sự cần thiết phải đặt hai biến trống:

@if $colorscheme == white { 
    $text-color: #333 !global; 
    $background-color: #fff !global; 
} @else { 
    $text-color: #ccc !global; 
    $background-color: #333 !global; 
} 

Ví dụ thứ 2 và thứ 3 của @ cimmanon tốt hơn nhiều.