管理者がユニバーサルサス変数の変更に影響を与えるカラーピッカーを使用して、自分のサイトのスキンを変更できるようにしたいと考えています。Emberカラーピッカーを使用してSCSS変数を更新
私は、ライブCSSにjQueryなどで影響を与える方法があることを知っていますが、実際にscss変数を変更したいと思います。次に例を示します。 http://emberjs.jsbin.com/xafajucifu/edit?html,css,js,output
あなたが見ることができるように、カラーピッカーを使用するだけ<body>
属性を変更しますが、私はそうは全体<html>
背景の変更を$main-color
変数を変更する方法をしたいと思います。
最良の方法にSAVEボタンが含まれているかどうか、またはそれを機能させる方法がわかりません。アイデアやその他の解釈には間違いがありません。あなたは私がここで働いている(代わりにjsbin例の)実際のコードを希望した場合
は、それは以下の通りです:
テンプレート/ settings.hbs
<table>
<tr>
<th>Property</th>
<th>Color</th>
</tr>
<tr>
<td>$main-heading-color</td>
<td>
<div id="color-pick">
{{col-pick value=mainHeadingColor}}
</div>
</td>
</tr>
</table>
コントローラ/設定。 JS
import Ember from 'ember';
export default Ember.Controller.extend({
mainHeadingColor: '0d723c'
});
スタイル/定義/オムニバスriables.scss
// project specific colors
$main-heading-color: #0d723c;
燃えさしのアドオン: https://www.npmjs.com/package/ember-colpick
実際のファイルを変更する唯一の方法は、要求を受け取り、ファイルに書き込むためのアクセス権を持つバックエンドを持つことです。 – locks
Relocks:それは唯一の解決策ですね、ありがとう。 – atschaal