2016-03-22 6 views
0

私は、色変数(例:HEXカラーコード)のリストを含むデータベーステーブルを持っています。私のスタイルはGulpとSASSを使ってコンパイルされます。サーバー側の言語からの動的SASS変数

私のDjangoアプリケーションがデータベースに行を作成/更新するとき、色に基づいて新しいスタイルシートを作成する必要があります。 何とか私は私のサーバー側のアプリケーションからビルドプロセスに色を取得する必要があります。

Record with colours added -> Gulp runs -> New colour variables are used within the stylesheet generation. 

どのようにこれを行うことができますか?

おかげで、

+0

何か試しましたか? *何でも? – cimmanon

+0

私はこれまでに様々なビルドプロセスを行ってきましたが、ヴァールでは決して輸送していません。私は前にこの問題を解決したかもしれない誰かが正しい方向にある点を探しています。編集 - 私はまた、Gulpのビルドプロセスでさまざまなデータ注入技術を見てきましたが、どれもモデルに適合していないようです。より有望なギャルプデータ。 – Lee

答えて

1

私はこの問題を解決し、コンテキスト配列を取り、SASSのプロセスが実行される前にVARSを置き換えるgulp-preprocessと呼ばれるモジュールがあり

...理想的な方法よりも少ない。..

例えば:

SASSファイル

$body-background: '/* @echo body-background */'; 

body { 
    background: $body-background; 
} 

GULP

var data = { 
    '1': { 
     'body-background': '#f00', 
    }, 
    '2': { 
     'body-background': '#ffffff', 
    } 
} 

gulp.task('scss', function() { 

    for (var partner_id in data) { 
     if (!data.hasOwnProperty(partner_id)) continue; 
     var partner_data = data[partner_id] 

     gulp.src('./static/scss/*.scss') 
      .pipe($.sourcemaps.init()) 
      .pipe($.preprocess({context: partner_data})) 
      .pipe($.sass({ 
        errLogToConsole: true, 
        style: 'compact' 
       }) 
       .on('error', function (err) { 
        console.log('Error:', err); 
        this.emit('end'); 
       })) 
      .pipe($.autoprefixer({cascade: false})) 
      .pipe($.cssnano()) 
      .pipe($.sourcemaps.write('./maps')) 
      .pipe(gulp.dest('./static/css/'+ partner_id)) 
    } 
}); 
0

私はあなたのSASSファイルから複数のテーマを作成することができます。このサービスhttps://www.grooveui.com、出くわしました。

唯一のキャッチは、SASSファイルをホストする必要があることです。次に、新しいテーマを作成し、変数値を設定することができます。私は彼らが変数を格納し、複数のSASSファイルを生成するためにデータベースを使用していると思います。

試してみる価値があります。

関連する問題