Estilizando Reagir Usando Sass

❮ Anterior Próximo ❯

O que é Sass

Sass é um pré-processador CSS.

Os arquivos Sass são executados no servidor e enviam CSS para o navegador.

Você pode aprender mais sobre Sass em nosso Tutorial Sass .

Posso usar Sass?

Se você usar o create-react-appem seu projeto, poderá instalar e usar facilmente o Sass em seus projetos React.

Instale o Sass executando este comando no seu terminal:

>npm i sass

Agora você está pronto para incluir arquivos Sass em seu projeto!

Criar um arquivo Sass

Crie um arquivo Sass da mesma forma que você cria arquivos CSS, mas os arquivos Sass têm a extensão de arquivo .scss

Em arquivos Sass você pode usar variáveis e outras funções Sass:

meu-sass.scss:

Crie uma variável para definir a cor do texto:

$myColor: red;

h1 {
  color: $myColor;
}

Importe o arquivo Sass da mesma forma que importou um arquivo 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'));