如何在Angular组件中访问SCSS/SASS变量

Question

如何在Angular组件中访问SCSS/SASS变量

8

我需要找到一种方式在Angular5组件的HTML中访问SCSS变量（及其值），希望有人能帮助我。

在我的variables.scss文件中，我定义了一些变量，例如：

...
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;
...

假设我的调色板由以下颜色组成。

我还创建了一些Angular组件，用于重复使用表格、图表等内容。这些组件使用ng2-charts/Chart.js。其中之一是LineChartComponent，我将使用它来澄清我的问题。

...
<app-line-chart 
    height="500" 
    [hexColors]="['#ccccccc', '#666666','#000000']" 
    [datasetLabels]="..." 
    [datasets]="..."
    [axisLabels]="..."></app-line-chart>
...

您可以看到，我可以设置一些十六进制颜色。这些颜色将在LineChartComponent中转换为RGBA颜色。

但是，假设我的颜色调色板正在更改。那么我就不仅需要在variables.scss中更改我的颜色，还需要在所有通过不同组件传递的这些颜色的地方进行更改。

到目前为止，我还没有找到一种访问我的组件内变量的方法。我考虑创建一个全局的typescript文件，在其中也定义这些颜色，这样我只需要编辑两个位置，就可以得到如下内容：

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 
    height="500" 
    [hexColors]="[colors.primary1, colors.primary2, colors.primary3]" 
    [datasetLabels]="..." 
    [datasets]="..." 
    [axisLabels]="..."></app-line-chart>
...

但是，当我的颜色调色板更改时，我必须修改两个地方。这对我来说听起来不太合理，我相信应该有更好的方法来做到这一点，这样我只需要在想要替换颜色时编辑一个地方。最好通过编辑SCSS来完成，因为样式表（在我看来）负责样式和着色。有人能分享他/她的想法吗？

编辑：amit77309提到这可能是访问SASS值($colors from variables.scss)在Typescript(Angular2 ionic2)的重复问题，但是那个解决方案似乎不起作用。我没有使用ionic，但是从解决方案中可以看出这可能不是问题所在。自定义属性未列在bodyStyles的属性列表中，因此无法访问。

- Stephan Schrijver

可能是在Typescript（Angular2 ionic2）中访问SASS值（$ colors from variables.scss）的重复问题。 - amitdigga

不行，那个方法不起作用。我之前看到过这个解决方案，但在我看来似乎太复杂了。现在我刚刚尝试了一下，但它并没有起作用。在调试代码时（在“bodyStyles”上放置一个监视器），似乎没有将自定义属性添加到其中，因此读取值会返回null/空。 - Stephan Schrijver

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Henrique Erzinger · Accepted Answer

您无法直接从typescript或html访问SASS变量，但是可以通过css自定义属性轻松实现。

// 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);

请记住，在Angular中，element指的是nativeElement。

@amit77309引用的帖子展示了一种与sass变量一起声明自定义属性的方法之一，但如果你认为它太复杂，你可以简单地将它们一起声明。只要你将变量设置为自定义属性，你就可以在你的TypeScript中访问它们，并在模板中使用它们。

有人可能会认为这确实是一个重复的问题，因为那个答案解决了你的问题，但这是一个更简化和基本的方法，看起来你表示它太复杂了，而你不能让它工作。也许，通过更好地理解其底层机制，你可以实现你的目标。