Question

这个问题与this one类似，但与创建一个新主题不同。

在处理angular 2 animations时，我无法弄清楚如何访问位于 [project] \ src \ theme \ variable.scss 中的颜色变量。

让我们说 [project] \ src \ theme \ variable.scss 将此放在首位：

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

现在在Ionic 2 / Angular 2 Component中，在@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')),
    ]),
 ]

现在我尝试了以下方法在字段[Some statement to define color active]中设置backgroundColor：

'#387ef5' =＆gt;这个工作;
'($colors,primary)' =＆gt;不工作
'color($colors,primary)' =＆gt;不工作
'primary' =＆gt;不工作

每次它不起作用时，都会抛出错误：Failed to execute 'animate' on 'Element': Partial keyframes are not supported.;

我很惊讶我无法访问“variable.scss”中的变量，因为定义backgroundColor的语句嵌入在style({})语句中。我想象可以使用style({})常规CSS，与the other topic I refer to相反，其目的是访问TypeScript中的CSS值。

有没有人回答，或者可以启发我这个？

Answer 1

您无法直接在Javascript中访问SCSS变量。无论何时运行构建过程，SCSS脚本都会编译为CSS，并且不会维护变量，而是在整个脚本中将其替换为实际值。

如果要访问变量的值，可以将不可见元素添加到具有类的DOM中，使其颜色成为某个SCSS变量，例如$ primary，然后在Javascript中访问这些值。但这是一个丑陋的解决方法。

Ionic 2动画（使用Angular2）=＆gt;来自variable.scss的颜色，`无法在'元素'上执行'动画'：不支持部分关键帧

1 个答案: