SCSS/Compassの動的インポート？

Question

私はコンパスを使ってFoundationの上に構築されたSCSSプロジェクトを持っています。その後、SASSの変数のセットを定義し、これらの変数の観点からルールの束を定義しています（私のプロジェクトは、変数の設定とimport文より多くのを持っているが、これは簡略化されている。）

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を呼ぶ可能性があるため、その後、すべてのテーマをサッと取り出しやすいだろう

compass --otherVars themes/theme2 

：ような何かを呼び出すことができます。

SCSSでこれを行えますか？私はそれを見て、それはそれのように見えません。

_app_prefix.scss：

$foo = #fafafa 
$bar = 14px; 

_app_suffix.scss：

@import '_rules'; 

私の現在の回避策は、接頭辞と接尾辞の中に、元vars.scssを分割することです

app.scss：

theme2.scss：

@import '_app_prefix'; 

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

@import '_app_suffix'; 

この

@import '_app_prefix'; 
// no overrides by default 
@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" 

（もちろん、これはややhandwavyですが、うまくいけば、あなたのアイデアを得る。）

これを行う方法はありますか？あるいは、ハンドルバーや他のテンプレート言語に頼らざるを得ませんか？

Answer 1

いつでもコンパスに送信する一時ファイルを生成できます。 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()) 

あなたはそれが好きで呼びたい：

そして、それは/あなたが望む出力とtmp.scss上書き作成されます。

Answer 2

SASSの開発者は、viability of this requestを考慮した問題があるようです。しかし

1. https://github.com/nex3/sass/issues/658
2. https://github.com/nex3/sass/issues/115
3. https://github.com/nex3/sass/issues/451

、あまり非常によく、それとの文書、それをサポートしています：

はここで機能を要求する人々の方の人のためにhttp://lesscss.org/features/#variables-feature-import-statements

Answer 3

を使っている

することができます/src/css/import.scssで

sass: { 
    options: { 
    loadPath: ['../src/css/themes/myTheme/'], 
    style: 'nested', 
    precision: 2 
    }, 

そして、次のよう彼らのSCSS/SASSファイルをコンパイルするうなり声は、解決策は「SASS」タスクの設定に追加のパラメータロードパスを追加しました彼らは、現在のディレクトリにあるかのようなテーマから、それらのファイルが含まれています

@import "config"; 

ファイルが/src/css/themes/myTheme/config.scssから含まれていました。

注：もちろん、あなたのGruntタスクにパラメータを追加し、そのテーマ名を動的にすることができます！