Angular2+中如何在Pug文件的ngStyle中获取SCSS变量$fam_1的值？

首先得说清楚为什么你直接写$fam_1不行：SCSS变量是在编译阶段被处理替换的，而ngStyle是Angular在运行时解析的模板语法，所以直接把$fam_1写在ngStyle里，Angular只会把它当成普通字符串"$fam_1"，而不是编译后的颜色值#A474DB。下面给你几个可行的解决方案：

方案1：用CSS自定义属性（推荐，动态场景适用） #

把SCSS变量转成全局的CSS自定义属性，然后在Angular组件里读取这个属性值再绑定到ngStyle：

1. 在variables.scss里导出SCSS变量为CSS变量：

$fam_1: #A474DB;
// 把SCSS变量注入到全局根元素的CSS变量中
:root {
  --fam-1-color: #{$fam_1};
}

2. 在组件类中读取这个CSS变量：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './file.pug',
  styleUrls: ['./your-component.scss']
})
export class YourComponent implements OnInit {
  fam1BgColor: string;

  ngOnInit() {
    // 从根元素获取CSS变量值
    this.fam1BgColor = getComputedStyle(document.documentElement)
      .getPropertyValue('--fam-1-color')
      .trim(); // 去除可能的空格
  }
}

3. 在Pug模板的ngStyle中绑定组件属性：

divName('[ngStyle]'="{'background-color': fam1BgColor}")

方案2：用Angular环境常量（同步TS和SCSS变量） #

如果这个颜色是全局固定的，你可以在Angular的环境文件中定义常量，同时让SCSS变量同步这个值，这样两边都能复用：

1. 在environments/environment.ts中定义颜色常量：

export const environment = {
  production: false,
  // 全局颜色常量
  colors: {
    fam1: '#A474DB'
  }
};

2. 在variables.scss中引用这个TS常量（Angular CLI默认支持这种语法）：

// 从环境常量同步SCSS变量
$fam_1: #{environment.colors.fam1};

3. 在Pug模板中直接使用环境常量：

divName('[ngStyle]'="{'background-color': environment.colors.fam1}")

注意：这种方法需要手动保持TS常量和SCSS变量的同步，避免两边值不一致。

方案3：用SCSS类（静态样式优先） #

如果这个背景色不需要动态切换，完全可以不用ngStyle，直接定义SCSS类来实现，这是最简单的方式：

1. 在组件的SCSS文件（或全局SCSS）中定义类：

@import 'path/to/variables.scss'; // 导入变量文件

.fam1-background {
  background-color: $fam_1;
}

2. 在Pug模板中直接添加类：

divName.fam1-background

内容的提问来源于stack exchange，提问作者Smith James