如何使用角度设置 SCSS 变量答案

【问题标题】：How to set a SCSS variable using angular如何使用角度设置 SCSS 变量
【发布时间】：2021-05-05 02:57:46
【问题描述】：

我正在尝试使用组件更改 css 变量，但由于某种原因它不起作用，有什么帮助吗？

//work but i dont want to use the property background
<div class="planete" [ngStyle]="{'background': planete.planeteBackgroundColor }"></div> 

/* this is what i'd like to do :
.SCSS 
$my-var 
/*...*/
background: $my-var;

HTLM：

// does not work
<div class="planete" [ngStyle]="{'$my-var': planete.planeteBackgroundColor }">

// second option:
.SCSS 
--my-var 
/*...*/
background: var(--my-var)

HTLM：

// does not work
<div class="planete" [ngStyle]="{'--my-var': planete.planeteBackgroundColor }">

感谢回复

【问题讨论】：

恐怕你不能用 ngStyle 做到这一点。不过还有其他方法：medium.com/angular-in-depth/…

标签： css angular typescript sass

【解决方案1】：

你试过了吗？

  <div class="planete" [ngStyle]="{'background': var(planeteBackgroundColor) }">

.SCSS

planeteBackgroundColor='FFFFFF'

但构建动态主题的最简单方法应该是：

 <div class="planete" [ngStyle]="{'background': planeteBackgroundColor }">

并在你的组件 ts 文件中定义变量：

planeteBackgroundColor='FFFFFF'

【讨论】：

我想使用 scc 变量作为背景颜色，因为它嵌入在我的 css 文件中的径向渐变函数中。但是感谢 MikeOne，我这样解决了这个问题：在组件 ts 中：setColor(){ document.documentElement.style.setProperty('$planete-color',this.planete.planeteBackgroundColor); } 在 scss 文件中：$planete-background-color：var(--planete-color);
但我面临另一个问题，当我在另一个变量中传递变量时不允许这样做：'@'include border-gradient($planete-background-color, $planete-border-颜色）; /* ** */ '@'mixin border-gradient($from, $to, $weight: 0, $blur-radius:0, $spread-radius:0) 不工作