Стилізація React за допомогою Sass

Що таке Sass

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

Файли Sass виконуються на сервері та надсилають CSS у браузер.

Ви можете дізнатися більше про Sass у нашому Посібнику Sass.

Чи можу я використовувати Sass?

Якщо ви використовуєте create-react-app у своєму проєкті, ви можете легко встановити та використовувати Sass у своїх проєктах React.

Установіть Sass, виконавши цю команду у своєму терміналі:

Тепер ви готові включити файли Sass у свій проєкт!

Створити файл Sass

Створіть файл Sass так само, як і файли CSS, але файли Sass мають розширення .scss

У файлах Sass ви можете використовувати змінні та інші функції Sass:

$myColor: red;

h1 {
color: $myColor;
}

Імпортуйте файл Sass так само, як ви імпортували файл CSS:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';

const Header = () => {
return (
<>
  <h1>Hello Style!</h1>
  <p>Додайте трохи стилю!.</p>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);