Ionic 2 animations (with Angular2) => colors from variable.scss, `Failed to execute 'animate' on 'Element': Partial keyframes are not supported

Question

This question is similar to this one but different enough to make a new thread.

While working on angular 2 animations, I could not figure out how to access the colors variables that are located in [project]\src\theme\variable.scss.

Let's say [project]\src\theme\variable.scss has this on top:

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

Now in a Ionic 2/Angular 2 Component, in the @Component annotation, I have something like that:

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')),
    ]),
 ]

Now I have tried the following to set the backgroundColor in the field [Some statement to define color active]:

'#387ef5' => THIS WORKS;
'($colors,primary)' => DOES NOT WORK
'color($colors,primary)' =>DOES NOT WORK
'primary' => DOES NOT WORK

Everytime it does not work, it throws error: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.;

I am surprised I could not access the variables in "variable.scss", because the statement to define the backgroundColor is embedded within a style({}) statement. And I imagined that whithin style({}) regular CSS could be used, contrary to the other topic I refer to, where the aim is to access the CSS values in TypeScript.

Has anyone an answer, or can enlighten me regarding this?

score 1 · Accepted Answer · answered Jun 26 '17 at 12:20

You cannot access SCSS variables in Javascript directly. Whenever you run your build process the SCSS scripts are compiled into CSS and the variables are not maintained but replaced with their actual value throughout the script.

If you want to access the values of the variables you could add invisible elements to the DOM which have a class, that makes their color a certain SCSS variable, for instance $primary, and then access those values in Javascript. But it's an ugly workaround.

Ionic 2 animations (with Angular2) => colors from variable.scss, `Failed to execute 'animate' on 'Element': Partial keyframes are not supported

1 Answers1