Создание динамической переменной SASS для изменения меню вкладки Ionic 2?

Я ищу изменение цвета моего меню вкладки в проекте Ionic 2, получая значение от бэкенда (введите строку, например: ‘#ebebeb’).

<ion-tab> тег имеет атрибут[color]="", который получает значение от » переменных.scss » Sass.

В переменных.scss мы можем найти:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  custom: #ebebeb
);

Я добавил переменную «custom» с моим цветом.

Хорошо, теперь я хочу знать, можно ли сделать динамической эту переменную «custom». Я читаю строку из бэкенда (http-запрос) в Angular 2 typescript, поэтому у меня есть глобальная переменная «colorString», но я хочу знать, могу ли я изменить эту переменную SASS «custom» и динамически толкать ее переменную colorString.

Я читал, что это невозможно сделать, но я хочу знать Ваше мнение, может быть, с jQuery?

Приветствия 😉

1 ответ

  1. Вы не можете изменить переменную sass на лету. Но если вы хотите динамически изменять стили на основе значения из бэкэнда, будьте готовы испачкать руки javascript.

    Это не совсем изящный способ сделать это, но :

    <ion-tab [ngStyle]="getStyleFromBg()" ></ion-tab>
    

    В файле ts :

    variable : any;
    In constructor : get the string from backend & store to variable
    
    getStyleFromBg(){
        if(variable)
             return "background-color : "+variable; // replace background-color with the style attribute
        else
            return "";
    }
    

    Еще раз, это не очень элегантное решение, и я бы не советовал делать это так динамично.

    Лучший способ сделать это-иметь кучу переменных sass с этими цветовыми кодами и просто получить от серверной части, какой из этих цветовых кодов вы хотели бы использовать. That woud be a better way to do it.