6

Compass を介して Foundation の上に構築する SCSS プロジェクトがあります。一連の sass 変数を定義し、それらの変数に関して一連のルールを定義します (私のプロジェクトには、さらに多くの変数設定とインポート ステートメントがあります。これは単純化されています)。

vars.scss :

$foo = #fafafa
$bar = 14px;

// rules using $foo and $bar
@import '_rules';

次に、コンパスを使用してvars.scssをコンパイルすると、sass 変数のセットにすべてが適しています。ただし、アプリに別のテーマを設定し、元の変数をオーバーライドできる新しい変数セットを定義して別のテーマを生成する機能も必要です。

vars.scss :

$foo = #fafafa
$bar = 14px;

@import 'otherVars';

@import '_rules';

70 以上のテーマがある場合、ファイルを手動で編集できません。（私のアプリの目的には、それだけ多くのテーマが必要です。）私が本当に欲しいのは、次のようなことができるようにすることです：

vars.scss :

$foo = #fafafa
$bar = 14px;

@import '{{otherVars}}';

@import '_rules';

そして、次のように呼び出すことができます。

compass --otherVars themes/theme2

compassテーマごとに 1 回呼び出すことができるので、すべてのテーマを簡単に抽出できます。

SCSS はこれを可能にしますか? 調べてみましたが、そうでもないようです。

私の現在の回避策は、元のvars.scssをプレフィックスとサフィックスに分割することです。

_app_prefix.scss :

$foo = #fafafa
$bar = 14px;

_app_suffix.scss :

@import '_rules';

app.scss :

@import '_app_prefix';
// no overrides by default
@import '_app_suffix';

特定のテーマでそれをオーバーライドするには、次のようなファイルを作成します。

theme2.scss :

@import '_app_prefix';

// only override $foo - let the original value of $bar stand
$foo = #ebebeb;

@import '_app_suffix';

これは機能しますが、ちょっと面倒で、ボイラープレートが追加されます。

@import 'rules_foo'私の次の問題は、動的に構築する必要がある追加のステートメントを持ちたいということです。したがって、私の全体的なファンタジーは次のようになります。

vars.scss :

$foo = #fafafa
$bar = 14px;

@import '{{otherVars}}';

@import '_rules';
{{ @import 'additional_rules' for additional_rules in rules }}

そして、私は呼び出すことができます：

compass --otherVars themes/theme2 --rules "rules_1" "rules_2" "rules_3"

(明らかに、これはやや手抜きですが、理解していただければ幸いです。)

これを行う方法はありますか？それとも、ハンドルバーやその他のテンプレート言語に頼る必要がありますか?

4

2 に答える 2

0

コンパスに送信する一時ファイルをいつでも生成できます。Python コードを使用する場合:

import sys
with open('tmp.scss', 'w') as out:
    out.write(("""
$foo = #fafafa
$bar = 14px;

@import '%(pre-rules)s';

@import '_rules';
%(post-rules)s
    """ % {'pre-rules': sys.argv[1], 'post-rules': '\n'.join(["@import '%s';" % x for x in sys.argv[2:]])}).strip())

次のように呼び出します。

python stackoverflow.py themes/theme2 rules_1 rules_2 rules_3

そして、必要な出力で tmp.scss を作成/上書きします。

于 2013-02-15T12:40:31.933 に答える