如何在 Angular2 组件中操作 scss 变量答案

【问题标题】：How to manipulate scss variables in Angular2 components如何在 Angular2 组件中操作 scss 变量
【发布时间】：2017-03-21 16:34:00
【问题描述】：

有没有办法可以更改在 Angular2 组件中声明的 scss 变量？我想根据用户选择动态添加主题，因此需要修改 scss 变量。我阅读了有关将所有 scss 变量保存在单独的 scss 文件中并将其导入其他 scss 文件中的信息。但是我可以在我的组件文件中导入相同的内容并修改变量吗？这可行吗？ TIA

目前我正在使用 mixin。代码在这里：

// Color themes
$themes: (
  default: #ff0000,
  banana: #f1c40f,
  cherry: #c0392b,
  blueberry: #8e44ad,
  leaf: #27ae60,
  nightsky: #2980b9
);


// Helper theme mixin
@mixin theme($name, $color) {
    .#{$name}{
        background-color: lighten($color, 30%);
    }
  .#{$name} {
    h1{
      color: $color;
    }
  }
  .#{$name} {
    nav{
      a{
      color: $color;
      }
    }
  }
}

但是有没有办法可以从 Angular 组件更改 $themes 映射中的变量。

【问题讨论】：

标签： angular typescript sass angular2-components

【解决方案1】：

这在 Sass 的本质上不可能：它是一个构建时工具，一个预处理器。 Angular 只知道 CSS（尽管 Component 元数据中的 styles 和 styleUrls 属性）。

这意味着当 Angular 掌握你的样式时，Sass 已经被编译为 CSS。您无法在运行时更改 Sass 变量，因为此时它们不存在了。

您可以改用 custom properties 并通过常规 JavaScript 更改它们。

【讨论】：