Кому это нужно и зачем

Sass — препроцессор CSS, который добавляет переменные, вложенность, миксины и функции. Это помогает писать более поддерживаемые и повторно используемые стили, особенно в больших приложениях на React.

Важно: Sass работает на этапе сборки — он компилируется в обычный CSS и не выполняется в браузере.

Быстрый план действий

1. Создать приложение React (create-react-app).
2. Установить пакет sass: yarn add sass или npm install sass.
3. Переименовать .css в .scss и обновить импорты.
4. Организовать переменные и миксины и подключать их в нужных файлах.

Требования и подготовка

• Node.js и npm/yarn установлены локально. Проверьте командой npm –version или yarn –version.
• Базовый проект React (подойдет create-react-app).

Создание простого проекта React

Откройте терминал, перейдите в папку для проекта и выполните:

npx create-react-app my-app
cd my-app

Добавьте в src файл App.js как стартовую точку (пример ниже показывает обычный импорт CSS перед переходом на SCSS):

import React from "react";
import "./App.css";

function App() {
  return (
    

      
Использование Sass в React
      

        Синий
        Красный
        Зелёный
      
    
  );
}

export default App;

Установка Sass

Установите пакет, который выполняет компиляцию SCSS в CSS во время сборки:

# с yarn
yarn add sass

# или с npm
npm install sass --save-dev

После этого сборщик (Create React App или альтернативный) автоматически скомпилирует .scss в CSS при старте проекта.

Важно: не нужно добавлять отдельный загрузчик CSS — пакет sass достаточен для create-react-app. Если вы используете собственную сборку на Webpack, проверьте конфигурацию загрузчиков.

Переименование файлов и обновление импортов

Переименуйте файлы App.css и index.css в App.scss и index.scss. Затем обновите импорты:

import "./index.scss";
import "./App.scss";

С этого момента создавайте новые файлы стилей с расширением .scss.

Организация переменных и миксинов

Создайте папку src/Styles и внутри два файла: _variables.scss и _mixins.scss. Файлы с подчёркиванием обычно используются для частичных импортов — они не компилируются в отдельный CSS-файл.

_variables.scss:

$background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px;

_mixins.scss:

@mixin vertical-list {
  display: flex;
  align-items: center;
  flex-direction: column;
}

Подключите их в App.scss:

@import "./Styles/variables";
@import "./Styles/mixins";

.wrapper {
  background-color: $background-color;
  color: $text-color;
  padding: $block-padding;

  &__btns {
    @include vertical-list;

    button {
      width: $btn-width;
      height: $btn-height;
    }
  }
}

Импорт переменных в отдельных компонентах

Если у вас много компонентов, импортируйте глобальные переменные и миксины в каждом компоненте, где они нужны, либо создайте глобальную точку входа (например, src/styles/global.scss), которую подключаете в index.js.

// src/styles/global.scss
@import "./Styles/variables";
@import "./Styles/mixins";

// index.js
import './styles/global.scss';

Когда Sass в React не нужен: контрпримеры

• Проект очень маленький (несколько стилей) — простого CSS бывает достаточно.
• Вы используете CSS-in-JS (styled-components, Emotion) и проект ориентирован на компонентную стилизацию с изоляцией стилей.
• Требуется runtime-добавление стилей на лету (Sass компилируется на этапе сборки).

Альтернативные подходы

• CSS Modules: локальные классы + scss синтаксис (файлы *.module.scss).
• CSS-in-JS (styled-components, Emotion): динамические стили в JS.
• Чистые CSS Custom Properties (CSS-переменные) для темизации на стороне клиента.

Совет: комбинируйте — например, глобальные переменные в SCSS + CSS Modules для изоляции компонентов.

Ментальные модели и рекомендации

• «Sass = препроцессор» — помните, что Sass трансформируется до обычного CSS.
• Храните примитивы (цвета, отступы, размеры) в переменных.
• Миксины применяйте для часто повторяющихся фрагментов, а не для единичных случаев.
• Для локальных стилей используйте CSS Modules, чтобы избежать конфликтов имён.

Чеклист перед коммитом

• Установлен пакет sass в package.json.
• Все .css-файлы, которые должны быть SCSS, переименованы.
• Импорты обновлены (index.js, App.js и т.д.).
• Глобальные переменные и миксины вынесены в отдельную папку styles.
• Нет незадействованных @import в финальной сборке.

Пример миграции из CSS в SCSS (мини-методология)

1. Переименовать один файл App.css → App.scss.
2. Исправить импорт в компоненте.
3. Проверить сборку и стиль в браузере.
4. Вынести повторяющиеся значения в переменные.
5. Постепенно мигрировать остальные файлы.

Decision flow (когда выбирать Sass)

flowchart TD
  A[Нужна ли вложенность/миксины/переменные?] -->|Да| B[Проект на React]
  B --> C{Используется ли CSS-in-JS?}
  C -->|Да| D[Рассмотреть styled-components или Emotion]
  C -->|Нет| E[Использовать Sass и/или CSS Modules]
  A -->|Нет| F[Достаточно чистого CSS]

Советы по отладке и частые проблемы

• Если импорт scss-файла не применяется — проверьте, установлен ли пакет sass и перезапустите dev-сервер.
• При собственной сборке Webpack убедитесь, что настроены sass-loader, css-loader и style-loader (или MiniCssExtractPlugin для продакшена).
• Ошибки синтаксиса SCSS обычно останавливают сборку — внимательно проверяйте сообщения в терминале.

Совместимость и миграция

• Create React App поддерживает SCSS при установке пакета sass; дополнительных настроек не требуется.
• При переходе от .sass к .scss обратите внимание на синтаксис: .sass использует отступы, .scss — синтаксис, похожий на CSS.
• Для использования CSS Modules именуйте файлы *.module.scss и импортируйте как стили объекта в компонент.

Краткие определения

• SCSS: синтаксис Sass, расширяющий CSS и совместимый с ним.
• Миксин: повторяемая группа стилей, подключаемая через @include.
• Переменная: значение, задаваемое через $name и используемое по всему коду.

Итог и краткое резюме

Sass легко интегрируется в проекты React: установите пакет sass, переименуйте файлы и начните использовать переменные, миксины и вложенность. Если ваш проект требует динамики на клиенте или тесной интеграции стилей в компоненты, рассмотрите CSS-in-JS или CSS Modules. Для больших приложений комбинируйте подходы — глобальные SCSS‑переменные и локальные CSS Modules.

Заметка: перед массовой миграцией оцените затраты на рефакторинг и выгоду от улучшенной структуры стилей.

Ключевые действия: установка -> переименование -> импорт -> реорганизация переменных и миксинов.