atschaal atschaal - 3 months ago 13
HTML Question

Update SCSS variable through an Ember color picker

I would like to allow an admin to change the skin of one of my sites through a color-picker affecting change on a universal sass variable.

I know that there are ways to affect live css through jQuery, etc, but I would like to actually modify the scss variable. Here is the example:
http://emberjs.jsbin.com/xafajucifu/edit?html,css,js,output

As you can see, using the color picker only changes the

<body>
attribute, but I would like a method to change the
$main-color
variable so the entire
<html>
background changes.

I'm not sure if the best method involves a SAVE button or how to get it to work and am definitely open to ideas or other interpretations.

If you would prefer the actual code (instead of jsbin example) I'm working with here it is below:

templates/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>


controllers/settings.js

import Ember from 'ember';

export default Ember.Controller.extend({
mainHeadingColor: '0d723c'
});


styles/definitions/variables.scss

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


ember addon:
https://www.npmjs.com/package/ember-colpick

Answer

As I look more and more into this subject, I've found ways to emulate this. Here are a couple great examples:

  1. Modifying LESS variables through use of cssobj, essentially using the pre-compiled variables as javascript objects:

    Git Repo

    Demo Site

  2. Create colors, not through pre-compiled variables, but using currentColor.

    Blog Entry (CodePen included)

The actual answer is still "No, you can't dynamically change SASS variables", but I hope future searchees will be able to find a work-around solution like I have.