2016-05-16 5 views
1

管理者がユニバーサルサス変数の変更に影響を与えるカラーピッカーを使用して、自分のサイトのスキンを変更できるようにしたいと考えています。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

+2

実際のファイルを変更する唯一の方法は、要求を受け取り、ファイルに書き込むためのアクセス権を持つバックエンドを持つことです。 – locks

+0

Relocks:それは唯一の解決策ですね、ありがとう。 – atschaal

答えて

1

SCSSファイルがを前処理されている、彼らはによって解釈されるネイティブのCSSファイルを生成するために、プロジェクトのビルド時に処理されることを意味ししたがって、CSSのような(変数のような)SCSSファイルによって追加されたコンテキストは、ビルド後にが失われたです。

つまり、ユーザーがあなたのWebページ/ Webアプリケーションを表示している間は、変更しようとしているものは存在しません。あなたは何ができるか

は次のとおりです。

  • あなたが(例えばbackground-color)を変更するプロパティで(例えばmoddable-background-color)クラスを作成します。
  • 実行時に変更できるアプリケーションの要素でこのクラスを使用します。
  • 例えば$('moddable-background-color').css('background-color', 'selected color');(クラスのプロパティ値を変更するためのjQueryを使用しています。

私は推測SCSS変数の値を変更するバックエンドへの要求のいくつかの種類を行うことが可能であり、すべてのCSSの再構築を強制的にファイルを作成することはできませんが、このパスはお勧めしません。特殊クラスのアプローチよりも実質的なメリットはありませんが、目標を達成するのは難しく費用のかかる方法です。

+0

あなたの返事に感謝します。私の場合は、変数に依存することが多いので、専門クラスのアプローチよりも利点があります。 例えば、私は '$ main-color'と' $ main-color-light'と '$ main-color-dark'などを4つの主な変数に基づいています。これを回答としてマークしますが、バックエンドコールになるように聞こえます。 – atschaal

0

この件については、これをエミュレートします。

  1. は、本質的にはJavaScriptオブジェクトとしてコンパイル済みの変数を使用して、cssobjを使用してLESS変数を変更:

    Git Repo

    Demo Site

  2. は、色を作成します。ここではカップルの素晴らしい例であり、事前にコンパイルされた変数ではなく、currentColorを使用します。

    Blog Entry

は、実際の答えはまだ「いいえ、あなたは動的にSASS変数を変更することはできません」ですが、私は将来searcheesは、回避策を見つけることができるように願っています(CodePenは含まれています)私のようなソリューションです。

関連する問題