Как фронтенд-разработчик, вы, вероятно, знакомы с мощной комбинацией Angular, TypeScript и SCSS. Angular предоставляет надежную основу для создания динамических веб-приложений, TypeScript расширяет возможности JavaScript за счет строгой типизации, а SCSS предлагает гибкий и удобный способ стилизации вашего приложения. В этой статье мы рассмотрим различные методы использования переменных SCSS в TypeScript, которые позволят вам создавать более эффективный и удобный в сопровождении код.

Метод 1: использование значений переменных SCSS в качестве классов CSS
Один из способов доступа к переменным SCSS в TypeScript — использование их значений в качестве классов CSS. Определив класс для каждого значения переменной в файле SCSS, вы можете динамически применять эти классы к своим элементам HTML с помощью TypeScript. Вот пример:

// styles.scss
$primary-color: #ff0000;
$secondary-color: #00ff00;
.primary {
  color: $primary-color;
}
.secondary {
  color: $secondary-color;
}

// component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent {
  primaryClass = 'primary';
  secondaryClass = 'secondary';
}

<!-- my-component.component.html -->
<h1 [class]="primaryClass">Primary Heading</h1>
<p [class]="secondaryClass">Secondary Paragraph</p>

Метод 2: передача переменных SCSS в качестве входных свойств
Другой подход — передать переменные SCSS в качестве входных свойств в ваши компоненты Angular. Этот метод позволяет вам определять и использовать переменные в вашем файле SCSS и передавать их в ваш компонент TypeScript через привязки ввода. Вот пример:

// styles.scss
$primary-color: #ff0000;
$secondary-color: #00ff00;

// component.ts
import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent {
  @Input() primaryColor: string;
  @Input() secondaryColor: string;
}

<!-- my-component.component.html -->
<h1 [style.color]="primaryColor">Primary Heading</h1>
<p [style.color]="secondaryColor">Secondary Paragraph</p>

Метод 3: использование переменных SCSS в службах Angular
Если вам нужен доступ к переменным SCSS в службах Angular, вы можете добиться этого, внедрив токен DOCUMENTи манипулируя DOM для получения вычисленные значения переменных SCSS. Вот пример:

// my-service.service.ts
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable()
export class MyService {
  constructor(@Inject(DOCUMENT) private document: Document) {}
  getPrimaryColor(): string {
    const style = getComputedStyle(this.document.documentElement);
    return style.getPropertyValue('--primary-color');
  }
}

Метод 4: создание файла конфигурации
Чтобы сделать переменные SCSS доступными во всем приложении Angular, вы можете создать файл конфигурации, который экспортирует значения переменных как константы. Этот подход централизует определения переменных и позволяет импортировать их везде, где это необходимо. Вот пример:

// _variables.scss
$primary-color: #ff0000;
$secondary-color: #00ff00;

// config.ts
export const PRIMARY_COLOR = '#ff0000';
export const SECONDARY_COLOR = '#00ff00';

// component.ts
import { Component } from '@angular/core';
import { PRIMARY_COLOR, SECONDARY_COLOR } from './config';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent {
  primaryColor = PRIMARY_COLOR;
  secondaryColor = SECONDARY_COLOR;
}

В этой статье мы рассмотрели несколько методов использования переменных SCSS в TypeScript в приложениях Angular. Включив переменные SCSS, вы можете улучшить удобство сопровождения кода, повысить гибкость стилей и оптимизировать рабочий процесс внешней разработки. Поэкспериментируйте с этими методами, чтобы найти подход, который лучше всего соответствует требованиям вашего проекта, и воспользуйтесь преимуществами более эффективной и масштабируемой базы кода.