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

Update SCSS variable through an Ember color picker

本文关键字：SCSS 变量 更新 选择器 Ember 颜色 通过      更新时间：2023-09-26

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

我知道有一些方法可以通过jQuery等来影响live-css，但我想实际修改scss变量。以下是示例：http://emberjs.jsbin.com/xafajucifu/edit?html，css，js，输出

正如您所看到的，使用颜色选择器只会更改<body>属性，但我希望使用一种方法来更改$main-color变量，使整个<html>背景发生变化。

我不确定最好的方法是否包括SAVE按钮，也不确定如何让它发挥作用，我肯定对想法或其他解释持开放态度。

如果你更喜欢我在这里使用的实际代码（而不是jsbin示例），它如下：

模板/设置.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'
});

样式/定义/变量.scs

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

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

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

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

你能做的是：

  • 创建一个具有要更改的属性（例如background-color）的类（例如，moddable-background-color）
  • 在希望能够在运行时更改的应用程序元素中使用此类
  • 使用jQuery更改类中的属性值（例如$('moddable-background-color').css('background-color', 'selected color');

我想可以对后端执行某种请求，更改SCSS变量值并强制重建所有CSS文件，但我不建议使用这种路径，这是一种既困难又昂贵的方法来实现目标，与专用类方法相比没有真正的好处。

随着我越来越多地研究这个主题，我找到了模仿它的方法。这里有几个很好的例子：

  1. 通过使用cssobj修改LESS变量，本质上使用预编译的变量作为javascript对象：

    Git Repo

    演示站点

  2. 创建颜色，不是通过预编译的变量，而是使用currentColor。

    博客条目（包括CodePen）

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

相关文章：