Sass (folhas de estilo sintaticamente impressionantes) é uma extensão do CSS com recursos adicionais que o tornam mais poderoso. A melhor coisa sobre Sass é sua compatibilidade com CSS, o que significa que você pode usá-lo em seus projetos de desenvolvimento web com frameworks JavaScript como React.
No entanto, ao contrário do CSS vanilla, você precisa de um pouco de configuração para usar o Sass. Descubra como isso funciona configurando um projeto React.js simples e integrando o Sass a ele.
Como usar Sass em seu projeto React.js
Como outros processadores CSS, o Sass não é suportado nativamente pelo React. Para usar o Sass no React, você precisa instalar uma dependência de terceiros por meio de um gerenciador de pacotes como yarn ou npm.
Você pode verificar se o npm ou yarn está instalado em sua máquina local executando npm --versão
ou fio --versão. Se você não vir um número de versão em seu terminal, instalar npm ou fio primeiro.Criar um projeto React.js
Para seguir este guia, você pode configurar um aplicativo React.js simples usando create-react-app.
Primeiro, use uma linha de comando para navegar até a pasta na qual deseja criar seu projeto React. Então corra npx create-react-app . Quando o processo terminar, entre no diretório do aplicativo usando cd . Adicione o seguinte conteúdo ao seu App.js arquivo como iniciador:
importar Reagir de "reagir";
importar "./App.scss";
funçãoAplicativo() {
retornar (
<div className="embrulho">
<h1>Usando Sass no React</h1>
<cabeçalho className="wrapper__btns">
<botão>Botão Azul</button>
<botão>Botão vermelho</button>
<botão>Botão Verde</button>
</header>
</div> );
}
exportarpadrão Aplicativo;Depois de configurar um projeto básico do React, é hora de integrar o Sass.
Instalar Sass
Você pode instalar o Sass via npm ou yarn. Instale-o via yarn executando fio adiciona atrevimento ou, se preferir npm, execute instalação npm sass. Seu gerenciador de pacotes adicionará a versão mais recente do Sass à lista de dependências no projeto pacote.json arquivo.
Renomeie arquivos .css para .scss ou .sass
Na pasta do projeto, renomeie App.css e index.css para App.scss e index.scss, respectivamente.
Depois de renomear esses arquivos, você precisa atualizar as importações em seus arquivos App.js e index.js para corresponder às novas extensões de arquivo da seguinte maneira:
importar "./index.scss";
importar "./App.scss";Deste ponto em diante, você deve usar a extensão .scss para qualquer arquivo de estilo que criar.
Importando e usando variáveis e mixins
Um dos mais significativos vantagens do Sass é que ele ajuda você a escrever estilos limpos e reutilizáveis usando variáveis e mixins. Embora possa não ser aparente como você pode fazer o mesmo no React, não é tão diferente de usar o Sass em projetos escritos com JavaScript simples e HTML.
Primeiro, crie um novo estilos pasta em seu origem pasta. Na pasta Styles, crie dois arquivos: _variáveis.scss e _mixins.scss. Adicione as seguintes regras a _variables.scss:
$cor de fundo: #f06292;
$cor do texto: #f1d3b3;
$btn-largura: 120px;
$btn-altura: 40px;
$bloco-preenchimento: 60px;E adicione o seguinte a _mixins.scss:
@mixin lista vertical {
exibição: flexível;
itens de alinhamento: centro;
flex-direction: coluna;
}Em seguida, importe variáveis e mixins em App.scss da seguinte forma:
@importar "./Estilos/variáveis";
@importar "./Estilos/mixins";Use suas variáveis e mixins no arquivo App.scss:
@importar "./Estilos/variáveis.scss";
@importar "./Estilos/mixins";
.embrulho {
cor de fundo: $cor de fundo;
cor: $ cor do texto;
preenchimento: $bloco-preenchimento;&__btns {
@incluir vertical-lista;
botão {
largura: $btn-largura;
altura: $btn-altura;
}
}
}
É assim que você usa variáveis e mixins no React. Além de mixins e variáveis, você também pode usar todos os outros recursos incríveis do Sass, como funções. Não há limitação.
Usando Sass em React.js
O Sass oferece mais funcionalidades além do CSS, que é exatamente o que você precisa para escrever código CSS reutilizável.
Você pode começar a usar o Sass no React instalando o pacote sass via npm ou yarn, atualizando seus arquivos CSS para .scss ou .sass e atualizando suas importações para usar a nova extensão de arquivo. Depois disso, você pode começar a escrever SCSS no React.
