React Sass

Sass — это препроцессор CSS.

Файлы Sass выполняются на сервере и отправляют готовый CSS в браузер.

Sass добавляет дополнительные возможности к CSS, такие как переменные, вложенность, миксины и многое другое.

Добавление Sass в проект React

Чтобы подключить Sass к проекту React, необходимо установить пакет Sass.

Установите пакет с помощью npm:

npm install sass

Теперь вы готовы включать файлы Sass в свой проект!

Создание файла Sass

Создавайте файлы Sass аналогично обычным CSS-файлам, но с расширением .scss:

/* MyStyle.scss */
$myColor: red;

h1 {
  color: $myColor;
}

Импорт файла Sass

Вы можете импортировать файлы Sass в ваш компонент React.

// main.jsx
import { createRoot } from 'react-dom/client';
import './MyStyle.scss';

function MyHeader() {
  return (
    <h1>Мой заголовок</h1>
  );
}

createRoot(document.getElementById('root')).render(
  <MyHeader />
);

Модули Sass

Sass предоставляет множество встроенных модулей, которые помогают манипулировать цветами, математическими операциями, строками и прочими элементами.

Одним из них, например, является модуль sass:color.

Он позволяет изменить оттенок цвета, задав процент осветления или затемнения.

/* MyStyle.scss */
@use 'sass:color';
$myColor: red;

h1 {
  color: $myColor;
}

h2 {
  color: color.adjust($myColor, $lightness: -20%);
}

h3 {
  color: color.adjust($myColor, $lightness: 20%);
}

Добавим заголовки в наш компонент:

// main.jsx
import { createRoot } from 'react-dom/client';
import './MyStyle.scss';

function MyHeader() {
  return (
    <div>
      <h1>Мой заголовок 1</h1>
      <h2>Мой заголовок 2</h2>
      <h3>Мой заголовок 3</h3>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <MyHeader />
);