web-dev-qa-db-ja.com

CSSへのコンパイル時にSCSS変数を上書きする方法

SASSとCOMPASSに基づくjqtouchテーマを使用しようとしています。最も単純なコード、1つのインポート、および1つの上書きする変数を含むファイルcustom.scssがあります。

@import 'jqtouch';

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

Scssファイルをcssにコンパイルすると、基本的にはファイル名でjqtouch cssが生成されます。変数はドキュメント( Official Guide )およびjqtouch.scssファイルで定義されているため、色の指定は見当たりません。

WindowsマシンでSass 3.2.9とCompass 0.12.2を実行しています。

より多くの変数と異なるファイルインポートで試してみましたが、結果は常に、オーバーライド値が組み込まれていないということです。

Rubyコンパスの設定ファイルは疑わしいようです。

オーバーライド値が無視されるように、プロセスで何が問題になるのか誰にもわかりますか?

51
bouscher

色を設定していますafter既に使用されています。基本的に、あなたがしようとしているのはこれです:

$color: red;

.foo {
    background: $color;
}

$color: green;

Jqtouchの記述方法によっては、色をまったく変更できない場合があります。事前に変数を上書きするには、変数をデフォルトとして設定する必要があります。

$color: green;
$color: red !default; // red is only used if $color is not already set

.foo {
    background: $color; // color is green
}

したがって、コードは次のように記述する必要があります。

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

@import 'jqtouch';
87
cimmanon