Стилизация React с использованием Sass

Что такое Сасс

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

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

Вы можете узнать больше о Sass в нашем Sass Tutorial .

Могу ли я использовать Sass?

Если вы используете create-react-appв своем проекте, вы можете легко установить и использовать Sass в своих проектах React.

Установите Sass, выполнив эту команду в своем терминале:

>npm i sass

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

Создайте файл Sass

Создайте файл Sass так же, как вы создаете файлы CSS, но файлы Sass имеют расширение файла.scss

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

мой-sass.scss:

Создайте переменную для определения цвета текста:

$myColor: red;

h1 {
  color: $myColor;
}

Импортируйте файл Sass так же, как вы импортировали файл CSS:

index.js:

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

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));

❮ Предыдущий Следующий ❯

Реагировать Учебник