从 Typescript Angular 获取 CSS 参数

Posted 2023-03-13

【中文标题】从 Typescript Angular 获取 CSS 参数

【英文标题】：Get CSS Parameter from Typescript Angular

【发布时间】：2020-04-03 11:57:41

【问题描述】：

有没有办法从 Angular (8) 中的 ts 文件中获取在全局 scss 文件中设置的变量 我希望在 ts 代码中定义的画布元素中动态使用一些定义的变量。

【参考方案1】：

我有一种方法可以使用基于样式的服务 https://en.programqa.com/question/52907585/

---

在 Global.SCSS 内

@mixin ExportVariables($map, $prefix: null) 
  $mapPrefix: "--#$prefix";

  @if ($prefix)
    $mapPrefix: "#$mapPrefix-";
  

  body 
    @each $name, $value in $map 
      #$mapPrefix#$name: $value;
    
  


--idle-state: #29ABE2;

// Import each of these in the theme service
$stateSCSS:(
  idle: var(--idle-state),
);
@include ExportVariables($stateSCSS, 'stateSCSS');

在服务中

const bodyStyles = window.getComputedStyle(document.body);

this.stateSCSS = 
  idle: bodyStyles.getPropertyValue('--stateSCSS-idle'),
;

【参考方案2】：

我认为这回答了你的问题：access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)

TLDR：

不幸的是，没有办法直接从 typescript/javascript 代码访问 SASS 变量。但是，我们可以制定一种变通方法来访问这些变量。

您可以在上面提到的帖子中查看解决方法