React Sass

Sass (Syntactically Awesome Stylesheets) — это CSS-препроцессор.

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

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

Вы можете узнать больше о Sass в нашемучебнике по Sassдля получения дополнительной информации о Sass.

Установка Sass

Выполните следующую команду в терминале, чтобы установить Sass:

npm i sass

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

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

Способ создания файла Sass такой же, как создание файла CSS, но расширение файла Sass —.scss。

В файле Sass можно использовать переменные и другие возможности Sass.

Пример

Создайте переменную, чтобы определить цвет текста:

код файла my-sass.scss:

my-sass.scss

$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>Привет, стиль!</h1>
      <p>Добавьте немного стиля!.</p>
    </>
  );
}

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

В приведённом выше коде мы создали файл Sassmy-sass.scssи использовали в нём переменную Sass$myColorчтобы определитьh1цвет. Затем мыindex.jsимпортировали этот файл Sass так же, как обычный файл CSS, и вHeaderкомпонент использовал эти стили.

Другие расширения