Question

我遇到的情况是api为我提供了一种颜色，并且网站某些部分的颜色应基于api提供的颜色，现在该值已硬编码在app.scss文件中，是有一种方法可以动态更改其值？

考虑这种情况，我在用户路线上，并且用户模型为我提供了黄色，现在我该如何将该颜色应用于正文标签，页脚等？还有其他一些需要更改颜色的插件，现在我已经在app.scss中硬编码了插件的颜色

有没有一种方法可以根据api提供的颜色更改app.scss的颜色？

Answer 1

如果不需要支持IE，则可以使用CSS Variables，（caniuse）并使用JavaScript更改其值。

在CSS中，在文档根目录中设置background-image（因此是全局的）。然后在--variable-name: value的其他地方使用它：

var(--variable-name)

和JavaScript：

:root {
  --main-bg-color: red;  
}

#div1 {
  background-color: var(--main-bg-color);
  padding: 5px;  
}

Here is an example with ember-twiddle

Answer 2

Ember-cli在构建过程中将app.scss编译为css，并且在应用程序运行时不能影响它。

如果颜色是预定义的（即用户可以从列表中选择配色方案），则可以为body标签创建预定义的css类，然后只需更改body元素的css类。

您可以使用以下组件来更改body标签的CSS类

import $ from 'jquery';

import Component from '@ember/component';

export default Component.extend({
  didReceiveAttrs() {
    const oldClass = this._oldBodyClass;
    if (typeof oldClass === 'string') {
      $('body').removeClass(oldClass);
    }
    const bodyClass = this.bodyClass;
    if (bodyClass) {
      $('body').addClass(bodyClass);
      this.set('_oldBodyClass', bodyClass);
    }
  },
  willDestroyElement() {
    const bodyClass = this.bodyClass;
    if (bodyClass) {
      $('body').removeClass(bodyClass);
    }
  },
});

模板中的某处（可能是应用程序）：

{{body-class bodyClass=(user.bodyClass)}}

Answer 3

我希望这个addon对您有所帮助。您可以创建计算属性，具体取决于您的api用颜色响应的颜色，然后将其应用于html标签，如示例所示。

如何在ember js中动态更改app.scss值

3 个答案: