从 angular 2 typescript 编辑 SASS 变量

Posted 2023-03-07

【中文标题】从 angular 2 typescript 编辑 SASS 变量

【英文标题】：Edit SASS variable from angular 2 typescript

【发布时间】：2016-09-21 13:37:17

【问题描述】：

我希望从用户那里获取颜色并将现有的 sass 颜色变量修改为用户选择的颜色。我看到了link，但仍然没有与角度 2 相关的示例。请帮忙。提前致谢。

【参考方案1】：

SASS 是 CSS 预处理器，所以当你是客户端 html 标记正在使用它时，变量已经物化并且现在形成标准 CSS。

一旦您开始修改 Sass，它就会获取您预处理的 Sass 文件并将其保存为您可以在您的网站中使用的普通 CSS 文件。

正如 Manu Valdés 所提醒的那样，您可以使用 Angular2 做其他一些事情来帮助进行样式设置。有关组件样式的详细信息，请查看官方文档here。

【讨论】：

我在一个存储库中有两个应用程序，我希望根据用户的选择更改一个应用程序的 scss 变量。

听起来你需要看看theming。

好吧。我想更改主题本身的颜色，以便在整个应用程序中使用该变量。

【参考方案2】：

您可以使用像<div [style.color]="colorVar"> 这样的内联样式，这样您就可以将colorVar 的值从ts 更改为color 的div

【讨论】：

我在很多地方都使用过 sass 变量，我希望所有人都能根据用户的选择进行更新。

不要使用 sass 变量，使用 typescript 变量。

您的意思是将 typescript 变量用作全局变量并在整个应用程序中使用它？

如果你全局需要它，你可以把变量放在你在页面上注入的服务提供者中，这样你就可以从每个模板中访问它；这样，当您更改值时，它将在您的模板中全局更新。