2

関数のスコープ外で変数を変更したい場合の回避策はありますか? :

$ui-theme: 'pink';

@if $ui-theme == "pink" {
    $ui-main: #eb82b0;  
    $ui-secondary: #fff5f9;
    $ui-third: #f6c2d9;
} @else {
    $ui-main: #ff8067;  
    $ui-secondary: #fff6e5;
    $ui-third: #ffb1a2;
}

a { color: $ui-main; background: $ui-secondary };

定義の下に記述された他のすべてのコードでui-theme定義されるというグローバル変数を作成したいと思います。$ui-main, $ui-secondary...のようなディレクティブを使う場合も変数のスコープが適用されるよう@ifです。

これをどのように達成できるか知っている人はいますか？

4

1 に答える 1

3

コントロール ブロックの外側で変数を初期化する必要があります。

$ui-theme: 'pink';

$ui-main: null;
$ui-secondary: null;
$ui-third: null;

@if $ui-theme == "pink" {
    $ui-main: #eb82b0;  
    $ui-secondary: #fff5f9;
    $ui-third: #f6c2d9;
} @else {
    $ui-main: #ff8067;  
    $ui-secondary: #fff6e5;
    $ui-third: #ffb1a2;
}

a { color: $ui-main; background: $ui-secondary };

出力：

a {
  color: #eb82b0;
  background: #fff5f9;
}

@includeそのような変数をハードコーディングするよりも、単にテーマを設定する方が良いかもしれません。

_pink.scss:

$ui-main: #eb82b0;  
$ui-secondary: #fff5f9;
$ui-third: #f6c2d9;

スタイル.scss:

@include "pink"; // or don't include anything if you want the default colors

$ui-main: #ff8067 !default;
$ui-secondary: #fff6e5 !default;
$ui-third: #ffb1a2 !default;

a { color: $ui-main; background: $ui-secondary };
于 2013-05-24T20:13:51.393 に答える