как динамически изменить значение app.scss в Ember JS - PullRequest
Новая
       57

как динамически изменить значение app.scss в Ember JS

0 голосов
/ 13 февраля 2019

У меня есть ситуация, когда API предоставляет мне цвет, а цвет некоторых частей сайта должен основываться на цвете, предоставленном API, сейчас значение жестко задано в файле app.scss, этоЕсть ли способ, где я могу динамически изменить его значение?

рассмотрим этот случай, я нахожусь на маршруте пользователя, и пользовательская модель предоставляет мне желтый цвет, теперь как мне применить этот цвет к телутег, нижний колонтитул и т. д.?и есть другие аддоны, цвета которых нужно изменить, сейчас я жестко закодировал цвет аддона в app.scss

, есть ли способ изменить цвет app.scss в зависимости от цветапоставляется по API?

Ответы [ 3 ]

0 голосов
/ 13 февраля 2019

Если вам не нужна поддержка IE, вы можете использовать CSS-переменные , ( caniuse ) и изменять их значения с помощью JavaScript.

В вашем CSSустановите --variable-name: value в корне документа (чтобы он был глобальным).Затем используйте его в других местах с var(--variable-name): 

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

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

и в JavaScript: 

changeColor(newColor) {
  document.documentElement.style.setProperty('--main-bg-color', newColor);
}

Вот пример с тлеющим углем

0 голосов
/ 15 февраля 2019

Надеюсь, это аддон поможет вам.Вы можете создать вычисляемое свойство, которое зависит от вашего ответа API, и затем применить его к тегу html, как в примере.

0 голосов
/ 13 февраля 2019

Ember-cli компилирует app.scss в css во время процесса сборки, и вы не можете влиять на него во время работы приложения.

Если цвета предопределены (то есть пользователь может выбрать цветовую схему из списка), вы можете создать предопределенные css-классы для тега body, а затем просто изменить css-класс элемента body.

Вы можете использовать следующий компонент для изменения css-класса body tag 

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)}}
...