如何在Angular 5中基于变量条件化应用SASS样式表？

当然可以实现！在Angular 5里动态切换SASS主题，我有几个实用的方案，你可以根据项目的复杂度和需求来选择：

这个方法利用CSS变量的动态特性，结合给根组件添加不同的主题类来切换配色，实现起来简单且性能不错。

步骤如下：

1. 在全局SASS文件（比如styles.scss）里定义主题变量和对应类：

// 基础默认变量
$default-primary: #ccc;
$default-secondary: #eee;

// 蓝色主题类
.theme-blue {
  --primary-color: #1e90ff;
  --secondary-color: #87cefa;
}

// 绿色主题类
.theme-green {
  --primary-color: #32cd32;
  --secondary-color: #90ee90;
}

// 把默认值注入到根元素的CSS变量中
:root {
  --primary-color: #{$default-primary};
  --secondary-color: #{$default-secondary};
}

// 在全局或组件样式中使用这些变量
.btn {
  background-color: var(--primary-color);
  border-color: var(--secondary-color);
}

2. 在app.component.ts中管理主题状态，并绑定到根元素的类：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  currentTheme: string = 'blue'; // 默认蓝色主题

  // 切换主题的方法
  switchTheme() {
    this.currentTheme = this.currentTheme === 'blue' ? 'green' : 'blue';
  }
}

3. 在app.component.html中把主题类绑定到根容器：

<div [class]="'theme-' + currentTheme">
  <!-- 你的应用内容 -->
  <button (click)="switchTheme()">切换主题</button>
</div>

如果你的主题不仅是配色，还有不同的布局、组件样式，这个方法更合适——通过动态创建<link>标签加载预编译好的主题CSS文件。

步骤：

1. 创建独立的主题SASS文件：theme-blue.scss和theme-green.scss，各自定义主题样式（可以导入共享样式避免重复代码）：

// theme-blue.scss
$primary: #1e90ff;
$secondary: #87cefa;

@import './shared-styles'; // 导入共享的组件样式模板

// theme-green.scss
$primary: #32cd32;
$secondary: #90ee90;

@import './shared-styles';

2. 在Angular 5的配置文件.angular-cli.json中，把这两个主题文件配置为独立的编译bundle：

"styles": [
  "styles.scss",
  {
    "input": "src/theme-blue.scss",
    "output": "theme-blue"
  },
  {
    "input": "src/theme-green.scss",
    "output": "theme-green"
  }
]

3. 在app.component.ts中编写动态加载逻辑：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private themeLinkElement: HTMLLinkElement | null = null;

  ngOnInit() {
    this.loadTheme('blue'); // 初始化加载蓝色主题
  }

  loadTheme(theme: 'blue' | 'green') {
    // 移除之前的主题样式
    if (this.themeLinkElement) {
      document.head.removeChild(this.themeLinkElement);
    }

    // 创建新的样式链接
    this.themeLinkElement = document.createElement('link');
    this.themeLinkElement.rel = 'stylesheet';
    this.themeLinkElement.href = `./theme-${theme}.css`; // 对应编译后的CSS路径
    document.head.appendChild(this.themeLinkElement);
  }
}

这个方案和方案1核心逻辑一致，但用Angular的@HostBinding装饰器直接给根组件的宿主元素添加主题类，代码更简洁：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @HostBinding('class') themeClass: string = 'theme-blue';

  toggleTheme() {
    this.themeClass = this.themeClass === 'theme-blue' ? 'theme-green' : 'theme-blue';
  }
}

全局样式的定义和方案1完全相同，不需要修改模板中的类绑定逻辑。

注意： 如果需要兼容老旧浏览器（不支持CSS变量），方案2会是更稳妥的选择；而方案1和3适合现代浏览器环境，实现成本更低。

内容的提问来源于stack exchange，提问作者Marcus Horne