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 uma vez que React.
No entanto, ao contrário do CSS vanilla, você precisa de um pouco de feição para usar o Sass. Descubra uma vez que isso funciona configurando um projeto React.js simples e integrando o Sass a ele.
Porquê usar Sass em seu projeto React.js
Porquê outros processadores CSS, o Sass não é suportado nativamente pelo React. Para usar o Sass no React, você precisa instalar uma submissão de terceiros por meio de um gerenciador de pacotes uma vez que yarn ou npm.
Você pode verificar se o npm ou yarn está instalado em sua máquina sítio executando npm –versão ou fio –versão. Se você não vir um número de versão em seu terminal, instale primeiro o npm ou yarn.
Produzir um projeto React.js
Para seguir leste guia, você pode configurar um aplicativo React.js simples usando create-react-app.
Primeiro, use uma risco de comando para velejar até a pasta na qual deseja fabricar seu projeto React. Em seguida, execute npx create-react-app
import React from "react";
import "./App.scss";
function App() {
return (
<div className="wrapper">
<h1>Using Sass in React</h1>
<header className="wrapper__btns">
<button>Blue Button</button>
<button>Red Button</button>
<button>Green Button</button>
</header>
</div> );
}
export default App;
Depois de configurar um projeto obrigatório 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 última versão do Sass à lista de dependências no projeto pacote.json Registo.
Renomeie arquivos .css para .scss ou .sass
Na pasta do projeto, renomeie App.css e índice.css para App.scss e índice.scss, respectivamente.
Depois de renomear esses arquivos, você precisa atualizar as importações em seus arquivos App.js e índice.js para corresponder às novas extensões de registro da seguinte maneira:
import "./índice.scss";
import "./App.scss";
Deste ponto em diante, você deve usar a extensão .scss para qualquer registro de estilo que fabricar.
Importando e usando variáveis e mixins
Uma das vantagens mais significativas do Sass é que ele ajuda você a redigir estilos limpos e reutilizáveis usando variáveis e mixins. Embora possa não ser aparente uma vez que você pode fazer o mesmo no React, não é tão dissemelhante 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:
$background-color:
$text-color:
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px;
E adicione o seguinte a _mixins.scss:
@mixin vertical-list {
display: flex;
align-items: center;
flex-direction: column;
}
Em seguida, importe variáveis e mixins em App.scss da seguinte forma:
@import "./Styles/variables";
@import "./Styles/mixins";
Use suas variáveis e mixins no registro App.scss:
@import "./Styles/variables.scss";
@import "./Styles/mixins";
.wrapper {
background-color: $background-color;
color: $text-color;
padding: $block-padding;
&__btns {
@include vertical-list;
button {
width: $btn-width;
height: $btn-height;
}
}
}
É logo 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, uma vez que 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 redigir código CSS reutilizável.
Você pode iniciar 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 novidade extensão de registro. Depois disso, você pode iniciar a redigir SCSS no React.
Barnabé Ferreira