通過Ember顏色選擇器更新SCSS變量

我想允許管理員通過影響通用sass變量變化的顏色選擇器更改我的其中一個站點的皮膚。通過Ember顏色選擇器更新SCSS變量

我知道有一些方法可以通過jQuery等影響活的css，但我想實際修改scss變量。這裏是例子： http://emberjs.jsbin.com/xafajucifu/edit?html,css,js,output

正如你所看到的，使用顏色選擇器只改變<body>屬性，但我想的方法來改變$main-color變量所以整個<html>背景的變化。

我不確定最佳方法是否包含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' 
});

風格/定義/ VA riables.scss

// project specific colors 
$main-heading-color:  #0d723c;

燼插件： https://www.npmjs.com/package/ember-colpick

來源

2016-05-16 atschaal

更改實際文件的唯一方法是讓後端接收請求並有權寫入文件。 – locks

Re @locks：聽起來像這是唯一的解決方案，謝謝。 – atschaal

SCSS文件預處理，這意味着它們在項目生成時間處理，生成將由解釋本地CSS文件瀏覽器，因此由SCSS文件添加的不存在於CSS中的上下文（如變量）在構建後丟失。

換句話說，當用戶查看您的網頁/網絡應用程序時，您嘗試修改的內容不再存在。

你可以做的是：

你想改變（例如background-color）屬性創建一個類（例如moddable-background-color）。
在您希望能夠在運行時更改應用程序的元素中使用此類。
使用jQuery中的類更改屬性值（例如$('moddable-background-color').css('background-color', 'selected color');。

我猜可能執行某種要求，你的後臺是改變SCSS變量的值，並進行強制重建所有的CSS文件，但我不建議這樣的路徑，這是一個艱難和昂貴的方式來實現你的目標，沒有專門的類方法的真正好處

來源

2016-05-16 09:40:54 Terseus

我很欣賞你的回覆。就我而言，與專門的類方法相比，有好處，因爲我有很多取決於變量的方法。例如，我有'$ main-color'和'$ main-color-light'和'$ main-color-dark'等等，都是基於四個主要變量。我會將此標記爲答案，但它聽起來像是後端電話。 – atschaal

當我越來越多地看到這個問題，我已經找到了方法效仿這一點。這裏有幾個很好的例子：

通過使用cssobj修改LESS變量，實質上是使用預編譯的變量作爲JavaScript對象：

Git Repo

Demo Site
創建顏色，而不是通過預編譯的變量，而是使用currentColor。

Blog Entry（CodePen含稅）

實際的答案仍然是「不，你不能動態地改變SASS變量」，但我希望未來searchees將能夠找到一個解決像我的解決方案。

來源

2016-08-22 04:49:32 atschaal

通過Ember顏色選擇器更新SCSS變量

回答

相關問題