Ionic 2 анимации (с Angular2) => цвета из variable.scss, `Не удалось выполнить 'animate' для 'Element': частичные ключевые кадры не поддерживаются

Question

Этот вопрос похож на этот, но достаточно отличается, чтобы создать новую тему.

Работая над угловой анимацией 2, я не мог понять, как получить доступ к переменным цветов, которые находятся в [project]\src\theme\variable.scss.

Допустим, у [project]\src\theme\variable.scss это сверху:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  ...
);

Теперь в компоненте Ionic 2/Angular 2, в @Component аннотация, у меня есть что-то вроде этого:

animations: [
     trigger('changeBackgroundColor', [
        state('active', style({
            backgroundColor: [Some statement to define the active color]
        })),
        state('inactive', style({
            backgroundColor: '#32db64' 
        })),
        transition('* => inactive', animate('800ms ease')),
        transition('* => active', animate('800ms ease')),
        transition('inactive=> active', animate('800ms ease')),
        transition('active=> inactive', animate('800ms ease')),
    ]),
 ]

Теперь я попробовал следующее, чтобы установить backgroundColor в поле [Some statement to define color active]:

• '#387ef5'=> ЭТО РАБОТАЕТ;
• '($colors,primary)' => НЕ РАБОТАЕТ
• 'color($colors,primary)' => НЕ РАБОТАЕТ
• 'primary' => НЕ РАБОТАЕТ

Каждый раз, когда он не работает, он выдает ошибку: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.;

Я удивлен, что не смог получить доступ к переменным в "variable.scss", потому что оператор для определения backgroundColor встроен в style({}) заявление. И я вообразил, что в этом style({}) Можно использовать обычный CSS, в отличие от другой темы, на которую я ссылаюсь, где целью является доступ к значениям CSS в TypeScript.

Кто-нибудь имеет ответ, или может просветить меня по этому поводу?

Answer 1

Вы не можете получить доступ к переменным SCSS в Javascript напрямую. Всякий раз, когда вы запускаете процесс сборки, сценарии SCSS компилируются в CSS, и переменные не поддерживаются, а заменяются их фактическими значениями по всему сценарию.

Если вы хотите получить доступ к значениям переменных, вы можете добавить невидимые элементы в DOM, которые имеют класс, который делает их цвет определенной переменной SCSS, например, $ primary, а затем получить доступ к этим значениям в Javascript. Но это уродливый обходной путь.