如何在 Angular 组件中访问 SCSS/SASS 变量
Posted
技术标签:
【中文标题】如何在 Angular 组件中访问 SCSS/SASS 变量【英文标题】:How to access SCSS/SASS variables in Angular Components 【发布时间】:2018-09-28 20:58:25 【问题描述】:我必须找到一种在我的 Angular5 组件的 html 中访问 SCSS 变量(及其值)的方法,我希望有人可以帮助我。
在我的 variables.scss 中有一些变量,例如:
...
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;
...
假设我的调色板由这些颜色组成。
我还创建了一些 Angular 组件,用于重用表格、图表等。 这些组件使用 ng2-charts/Chart.js。其中之一是 LineChartComponent,我将使用它来澄清我的问题。
...
<app-line-chart
[hexColors]="['#ccccccc', '#666666','#000000']"
[datasetLabels]="..."
[datasets]="..."
[axisLabels]="..."></app-line-chart>
...
如您所见,我可以设置一些 hexColors。这些将被转换为 LineChartComponent 中的 RGBA 颜色。
但是现在......假设我的调色板正在改变。 然后,我必须在 variables.scss 中更改我的颜色,而且还要在这些颜色通过不同组件的所有地方更改颜色。
到目前为止,我还没有找到访问组件中变量的方法。我考虑过创建一个全局打字稿文件,其中还定义了这些颜色,所以我只需要编辑两个地方,我会得到这样的结果:
variables.scss
...
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;
...
color-variables.ts
export const COLORS = Object.freeze(
primary1: '#cccccc',
primary2: '#666666',
primary3: '#000000'
);
然后在我需要颜色的组件中设置全局变量。
example.component.ts
import COLORS from '../globals/variables';
...
@Component(...)
export class SomeComponent
...
colors = COLORS;
...
然后将我的组件的 hexColors 设置为:
...
<app-line-chart
[hexColors]="[colors.primary1, colors.primary2, colors.primary3]"
[datasetLabels]="..."
[datasets]="..."
[axisLabels]="..."></app-line-chart>
...
但是当我的调色板发生变化时,我必须再次修改两个地方。 这对我来说听起来不合逻辑,我相信应该有更好的方法来做到这一点,所以当我想替换颜色时,我只需要编辑一个地方。 最好通过编辑 SCSS,因为样式表(在我看来)负责样式和颜色。有没有人可以分享他/她的想法?
编辑:amit77309 提到这可能与access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2) 重复,但该解决方案似乎不起作用。 我没有使用离子,但正在寻找可能不是问题的解决方案。自定义属性未列在 bodyStyles 的属性列表中,因此无法访问。
【问题讨论】:
access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)的可能重复 不,这不起作用。之前遇到过那个解决方案,然后在我看来似乎很复杂。现在我刚刚尝试过,但它不起作用。在调试代码时(在“bodyStyles”上放置手表),似乎没有添加自定义属性,因此读取值返回 null/empty。 【参考方案1】:您不能直接从 typescript 或 html 访问 SASS 变量,但使用 css custom properties 很容易做到。
// get variable from inline style
element.style.getPropertyValue("--my-var");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");
// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);
请记住,在角度element
将指的是nativeElement。
@amit77309 链接的帖子显示了一种方法,您可以更轻松地声明自定义属性以及 sass 变量,但如果您觉得它太复杂,您可以简单地将它们一起声明。只要您将变量设置为自定义属性,您就可以在您的打字稿中访问它们并使其在模板中也可用。
有争议的是,这确实是重复的,因为该答案确实解决了您的问题,但这是一种简化且更基本的方法,似乎您表示它太复杂并且无法正常工作。也许你可以通过更多地了解它背后的底层机制来实现你的目标。
【讨论】:
感谢您的回答。不久前,我问过这个问题。我想澄清一下,解决方案并不复杂,但我的意思是实施对于我想要解决的问题来说太复杂了,IMO。话虽如此;以我现在的经验并看到您的回答,我可以看到它可以解决。如果我有时间我会运行一个简单的测试(现在有另一个实现,所以不再需要它了)。谢谢 当然,没问题。如果它帮助您理解问题,您能否将答案标记为已接受?以上是关于如何在 Angular 组件中访问 SCSS/SASS 变量的主要内容,如果未能解决你的问题,请参考以下文章
访问 Angular2 JavaScript ES5 组件中的元素