Português
English
Français
Deutsch
Español
Italiano
日本語
한국어
Русский
LarComo usar o Sass no React
Sass é uma versão melhorada do CSS que você pode usar em seus projetos React agora mesmo.
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 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 executandonpm --versãooufio --versão . Se você não vir um número de versão em seu terminal, instale primeiro o npm ou yarn.
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. Em seguida, executenpx create-react-app
Depois de configurar um projeto básico do React, é hora de integrar o Sass.
Você pode instalar o Sass via npm ou yarn. Instale-o via yarn executandofio adiciona atrevimentoou, se preferir npm, executeinstalação npm sass . Seu gerenciador de pacotes adicionará a versão mais recente do Sass à lista de dependências no projetopacote.jsonarquivo.
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:
Deste ponto em diante, você deve usar a extensão .scss para qualquer arquivo de estilo que criar.
Uma das vantagens mais significativas 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 e HTML simples.
Primeiro, crie um novoestilospasta em seuorigem pasta. Na pasta Styles, crie dois arquivos:_variáveis.scsse_mixins.scss . Adicione as seguintes regras a _variables.scss:
E adicione o seguinte a _mixins.scss:
Em seguida, importe variáveis e mixins em App.scss da seguinte forma:
Use suas variáveis e mixins no arquivo App.scss:
É 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.
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.
Alvin Wanjala é redator sênior para Android na MakeUseOf e desenvolvedor de software. Como um usuário ávido do Android que se apaixonou pelo ecossistema depois de adquirir seu primeiro dispositivo em 2013, ele se concentra em ajudar os usuários a tirar o máximo proveito de seus dispositivos. Mas, sendo um entusiasta da tecnologia que usa várias plataformas diariamente, ele também cobre iOS, Mac, mídia social e outros tópicos no amplo espectro da tecnologia de consumo. Alvin começou a escrever em 2018 em seu blog pessoal de tecnologia e profissionalmente em 2019 no TechTrendsKE, onde ele cobriu notícias gerais de tecnologia e análises de produtos. Desde então, seu trabalho tem sido apresentado no XDA Developers e em vários outros sites de tecnologia. Além de escrever, ele está cursando um segundo grau em TI, com foco no desenvolvimento de software.