27

次のコードを含む style.scss という名前のファイルが 1 つあります。

@import 'variables';

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

そして、_variables.scss という名前の 1 つのパーシャル:

$colorscheme: white;

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

if ステートメントは正しく機能しますが、内部で定義された変数は機能しません。コンパイルしようとすると、次のようになります。

構文エラー: 未定義の変数: “$text-color”.

4

2 に答える 2

47

それは完全に予想されます。変数にはスコープがあります。それらを制御ブロック内 (ifステートメントなど) で定義すると、外部では使用できなくなります。したがって、次のように外部で初期化する必要があります。

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

または...

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

if()次のように関数を使用する方が冗長ではありませんが:

$text-color: if($colorscheme == white, #333, #ccc);
$background-color: if($colorscheme == white, #fff, #333);
于 2013-03-12T21:19:19.320 に答える