Как работать с CSS-препроцессорами (SCSS/SASS) в Angular?angular-92

Подключение SCSS/SASS в Angular-проекте

При создании нового Angular-проекта можно сразу указать использование SCSS:

ng new my-app --style=scss

Для существующего проекта нужно:

  1. Изменить angular.json:
"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}
  1. Переименовать существующие .css файлы в .scss

Основные возможности SCSS в Angular

1. Переменные

Позволяют хранить часто используемые значения:

// _variables.scss
$primary-color: #3f51b5;
$secondary-color: #ff4081;

// Использование в компоненте:
.header {
  background-color: $primary-color;
}

2. Вложенность

Упрощает структуру стилей:

.card {
  padding: 1rem;

  &-header {
    font-size: 1.2rem;
  }

  &:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
}

3. Миксины

Позволяют повторно использовать куски кода:

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.container {
  @include flex-center(column);
}

4. Импорт файлов

Можно разбивать стили на модули:

// styles.scss
@import 'variables';
@import 'mixins';
@import 'components/buttons';

Лучшие практики работы с SCSS в Angular

  1. Структура проекта:

    src/
├── styles/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── components/
│       ├── _buttons.scss
│       └── _cards.scss
├── app/
└── styles.scss

  2. Компонентные стили:

    • Используйте ViewEncapsulation (обычно Emulated)
    • Локальные переменные в компонентах:
    :host {
  --local-padding: 1rem;
}

.component-class {
  padding: var(--local-padding);
}

  3. Глобальные vs локальные стили:

    • Глобальные стили - в styles.scss
    • Компонентные стили - в файлах компонентов

Оптимизация сборки

Angular CLI автоматически компилирует SCSS в CSS во время сборки. Для кастомных настроек можно использовать:

// angular.json
"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "stylePreprocessorOptions": {
            "includePaths": ["src/styles"]
          }
        }
      }
    }
  }
}

Отладка SCSS в браузере

  1. Включите source maps в angular.json:
"build": {
  "options": {
    "sourceMap": true,
    "extractCss": true
  }
}
  1. Используйте ng serve --source-map для разработки

Резюмируем

Angular отлично интегрирован с SCSS/SASS, предоставляя мощные инструменты для организации стилей. Использование препроцессоров значительно улучшает поддерживаемость и масштабируемость CSS-кода в больших проектах.

Вопросы

Собеседования