0

这个问题与这个问题相似，但不同之处足以创建一个新线程。

在处理angular 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')),
    ]),
 ]

现在我尝试了以下方法在字段中设置背景颜色[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，这与我提到的另一个主题相反，其目的是访问 TypeScript 中的 CSS 值。

有没有人回答，或者可以就此启发我？

4

1 回答 1

1

您不能直接在 Javascript 中访问 SCSS 变量。每当您运行构建过程时，SCSS 脚本都会被编译成 CSS，并且变量不会被维护，而是在整个脚本中替换为它们的实际值。

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

于 2017-06-26T12:20:36.663 回答