Question

我想允许管理员通过影响通用sass变量更改的颜色选择器来更改我的某个网站的外观。

我知道有很多方法可以通过jQuery等来影响live 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>

控制器/ settings.js

import Ember from 'ember';

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

风格/定义/ variables.scss

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

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

Answer 1

SCSS文件是预处理的，这意味着它们在项目构建时处理以生成将由浏览器解释的本机CSS文件，因此SCSS文件添加的上下文不是在构建之后，CSS（如变量）中出现丢失。

换句话说，当用户查看您的网页/网络应用程序时，您尝试修改的内容不再存在。

你能做的是：

使用您要更改的媒体资源（例如moddable-background-color）创建一个班级（例如background-color）。
在您希望能够在运行时更改的应用程序元素中使用此类。
使用jQuery更改类中的属性值（例如$('moddable-background-color').css('background-color', 'selected color');。

我想可以对你的后端执行某种请求，改变SCSS变量值并强制重建所有CSS文件，但我不推荐这条路径，这是一种艰难而昂贵的方法来实现你的目标与专业课程方法相比没有任何实际好处。

Answer 2

随着我越来越多地了解这个主题，我已经找到了模仿这个方法的方法。以下是几个很好的例子：

使用cssobj修改LESS变量，主要是使用预编译的变量作为javascript对象：

Git Repo

Demo Site
创建颜色，而不是通过预编译变量，而是使用currentColor。

Blog Entry（包括CodePen）

实际答案仍然是＆＃34; 不，您无法动态更改SASS变量＆＃34;但我希望未来的搜索者能够找到解决方法像我一样的解决方案。

通过Ember颜色选择器更新SCSS变量

2 个答案: