Como usar Sass no React Native

Sass, que significa “Syntactically Awesome Style Sheets”, é um pré-processador que ajuda a escrever, estruturar e organizar o código CSS. É amplamente usado hoje como uma alternativa ao CSS bruto para estilizar grandes aplicativos da web.

Na verdade, muitos frameworks CSS modernos e bibliotecas como Bootstrap também são escritos em Sass. Ele permite que os desenvolvedores usem variáveis, mixins, módulos, parciais e operadores em seus estilos CSS.

Embora o Sass seja popularmente acoplado a estruturas de front-end como React, você também pode usá-lo em seus projetos React Native. Neste guia, explicarei como você pode configurar e usar o Sass em seu aplicativo React Native, mas primeiro, vamos entender como o Sass funciona.

Como o Sass funciona

Sass é apenas uma ferramenta de tempo de desenvolvimento e não uma extensão do padrão CSS. Isso significa que quando você usa o webpack ou um empacotador de módulo para construir seu código, ele também compila seus arquivos Sass. No ecossistema da web, seus arquivos Sass são salvos com a extensão.scss em vez da extensão.css regular. O SCSS significa “Sassy CSS” e fornece um açúcar sintático semelhante ao CSS.

Você também pode escrever CSS bruto dentro de seus arquivos Sass porque todo CSS válido também é um SCSS válido. No entanto, o contrário não é verdade.

Como o React Native não usa CSS, mas objetos de estilo, seus arquivos Sass também são convertidos em objetos de estilo React Native sob o capô.

Isso oferece uma vantagem importante de escrever CSS bruto para estilizar seus componentes do React Native. Seu projeto React Native compila seus arquivos Sass em tempo de execução e os converte em objetos JavaScript regulares.

Agora que você entende como o Sass funciona, vamos configurá-lo dentro de nosso projeto React Native. Para este propósito, usaremos o pacote react-native-sass-transformer.

Configure o Sass no React Native

O pacote react-native-sass-transformer nos permite configurar, configurar e usar o Sass facilmente em qualquer tipo de projeto React Native. Ele também usa o pacote node-sass como uma dependência para fornecer a ligação Node ao Sass.

Vamos começar criando um novo projeto React Native:

npx react-native init rn-sass-app

Você pode instalar ambas as dependências em seu projeto executando o seguinte comando:

npm install react-native-sass-transformer node-sass

Depois de criar o projeto junto com as dependências acima, você precisa fazer algumas mudanças adicionais de configuração. No diretório raiz, adicione as seguintes configurações ao seu arquivo metro.config.js:

const {getDefaultConfig}=require (“metro-config”); module.exports=(async ()=> {const {resolver: {sourceExts}}=await getDefaultConfig (); return {transformer: {babelTransformerPath: require.resolve (“react-native-sass-transformer”)}, resolver: {sourceExts: [… sourceExts,”scss”,”sass”]}};}) ();

Se você estiver usando a Expo CLI, precisará criar explicitamente um arquivo metro.config.js dentro do diretório raiz. Você também precisará dizer à Expo para carregar essas configurações no projeto, fazendo os seguintes ajustes em seu arquivo app.json:

{“expo”: {…”packagerOpts”: {“config”:”metro.config.js”,”sourceExts”: [“js”,”jsx”,”scss”,”sass”]}…}}

Assim que as alterações acima forem concluídas, você poderá usar Sass em seus projetos Expo CLI ou React Native CLI.

Usando Sass para estilizar seus componentes React Native

Dentro do projeto, vamos criar um novo arquivo chamado App.scss onde podemos escrever os estilos Sass para nosso componente . Dentro do arquivo App.scss, vamos adicionar os seguintes estilos:

.container {display: flex; flex: 1; justificar o conteúdo: centro; alinhar-itens: centro; cor de fundo: # 333; }

Os estilos acima são escritos em CSS puro, mas como estamos usando a extensão.scss, nosso aplicativo será capaz de compilar esses estilos. Observe que usamos um seletor de classe.container para definir nossos estilos.

Para usar os estilos acima dentro de nosso arquivo App.js, primeiro precisamos importá-los:

import Appstyles de’./App.scss’;

Vamos simplesmente registrar o objeto Appstyles no console para ver a aparência desses estilos:

console.log ({Appstyles})

Você notará que nossos estilos CSS foram compilados para um JavaScript simples objeto:

Object {“Appstyles”: Object {“container”: Object {“alignItems”:”center”,”backgroundColor”:”# 333″,”display”:”flex”,”flexBasis”: 0 ,”flexGrow”: 1,”flexShrink”: 1,”justifyContent”:”center”,},},}

Agora podemos usar esses estilos como qualquer objeto de estilos React Native regular dentro do arquivo App.js:

função padrão de exportação App () {return ( Abra App.js para começar a trabalhar em seu aplicativo! ); }

O acima deve fazer com que nosso componente tenha a seguinte aparência:

Assim, com Sass você pode escrever seus estilos em CSS puro. Vamos refatorar nossos estilos acima no SCSS agora.

Usando variáveis ​​no Sass

O Sass nos permite criar variáveis ​​para armazenar informações que podemos usar em vários blocos de estilo. Podemos criar uma variável Sass usando o prefixo $. Vamos criar as seguintes variáveis ​​dentro de nosso arquivo App.scss:

$ background-color: # 333; $ cor primária: # d3d3d3; $ font-large: 20px;

Em vez de codificar tamanhos e cores de fonte, podemos usar variáveis ​​para definir diferentes tamanhos de fonte para textos, cores de fundo para nossos contêineres, etc. Vamos usar as variáveis ​​acima para definir o estilo dos componentes e :

$ cor de fundo: # 333; $ cor primária: # d3d3d3; $ font-large: 20px;.container {display: flex; flex: 1; justificar o conteúdo: centro; alinhar-itens: centro; background-color: $ background-color; preenchimento: 20px; }.text {font-weight: 700; alinhamento de texto: centro; font-size: $ font-large; cor: $ cor primária; }

Vamos usar os estilos acima dentro de nosso arquivo App.js:

exportar a função padrão App () {return ( Abrir até App.js para começar a trabalhar em seu aplicativo! ); }

Agora devemos ver nosso componente com um estilo diferente:

Ótimo! Vamos agora ver como podemos reutilizar nossos estilos para diferentes seletores no Sass usando herança.

Usando herança no Sass

Um dos recursos mais úteis do Sass é que ele permite que você reutilize um conjunto de estilos entre vários seletores.

Assim como podemos definir variáveis ​​para uma regra de estilo, podemos definir uma classe de espaço reservado que contém um conjunto de regras de estilo usando o símbolo%. Podemos então reutilizar esses estilos onde quisermos.

Para demonstrar, vamos criar mais algumas variáveis ​​dentro do nosso arquivo App.scss:

$ light: #fff; $ roxo: roxo; $ azul-violeta: blueviolet; $ dimensão da caixa: 100;

Agora, vamos definir uma classe de espaço reservado chamada box-shared que tem os seguintes estilos:

% box-shared {box-shadow: 0 0 1px rgba (0, 0, 0, 0,25); borda: 1px sólido #ccc; preenchimento: 10px; altura: $ dimensão da caixa; largura: $ dimensão da caixa; margin-bottom: 100px; }

Agora podemos usar os estilos definidos dentro de nossa classe de espaço reservado compartilhada por caixa em diferentes seletores. Os estilos acima podem ser usados ​​como estilos gerais que queremos associar a qualquer classe de caixa que desejamos usar.

Por exemplo, digamos que queremos renderizar uma caixa branca na tela. Em vez de reescrever os estilos acima, podemos herdar os estilos acima usando a palavra-chave @extend:

.boxWhite {@extend% box-shared; cor de fundo: $ light; }

A classe.boxWhite acima conterá todos os estilos definidos na classe box-shared. Vamos renderizar um componente simples para exibir os estilos acima:

exportar a função padrão App () {return ( ); }

Agora devemos ver uma caixa branca na tela, conforme mostrado:

Podemos usar estender ou herança se quisermos adicionar elementos de interface do usuário semelhantes que podem reutilizar alguns estilos comuns. Por exemplo, podemos criar estilos para mais caixas de cores diferentes, como mostrado:

.boxPurple {@extend% box-shared; cor de fundo: $ roxo; }.boxBlueViolet {@extend% box-shared; cor de fundo: $ azul-violeta; }

E, em seguida, use essas classes dentro de nosso componente:

exportar a função padrão App () {return ( ); }

O acima deve renderizar três caixas de cores diferentes, conforme mostrado:

Incrível! Antes de encerrarmos, vamos ver como o Sass nos permite fazer cálculos matemáticos simples enquanto escrevemos nossos estilos usando operadores.

Usando operadores no Sass

Podemos usar operadores para calcular a altura dinamicamente , largura, preenchimento, margem e outras propriedades de nossos elementos. Volte para o arquivo App.scss e crie outra variável:

$ box-dimension-lg: 250;

Vamos também criar uma classe extend que contém nossos estilos flexbox:

% flex-box {display: flex; justificar o conteúdo: centro; alinhar-itens: centro; }

Vamos alterar os estilos de nossa classe de espaço reservado box-shared como mostrado abaixo:

% box-shared {box-shadow: 0 0 1px rgba (0, 0, 0, 0,25); borda: 1px sólido #ccc; preenchimento: 10px; altura: $ box-dimension-lg; largura: $ caixa-dimensão-lg; margin-bottom: 100px; raio da borda: 10px; }

Além disso, vamos atualizar os estilos de nossa classe boxWhite que usamos na seção anterior:

.boxWhite {@extend% flex-box; @extend% box-shared; cor de fundo: $ light; }

Se você notou, nós herdamos os estilos de duas classes dentro de nossa classe boxWhite, o que é perfeitamente normal.

Agora quero criar outra caixa que sempre terá metade da altura e largura de sua caixa pai. Como renderizaremos essa caixa dentro da caixa branca com a classe boxWhite, podemos usar $ box-dimension-lg para calcular a altura e a largura da caixa:

.boxInside {@extend% box-shared; cor de fundo: azul claro; altura: ($ box-dimension-lg/2); largura: ($ caixa-dimensão-lg/2); }

Vamos também renderizar esta caixa dentro de nosso arquivo App.js:

exportar a função padrão App () {return ( ); }

Agora devemos ver uma caixa com metade das dimensões de sua caixa pai que está dentro dela:

Você pode usar todos os operadores como +,-, *,/, e% para calcular os valores dentro de suas regras.

Conclusão

Sass pode realmente simplificar seus estilos e regras CSS com a ajuda de variáveis ​​e herança. Ele ajuda você a escrever estilos mais claros e concisos para seu aplicativo React Native. Você também pode reutilizar seus estilos Sass facilmente entre seus projetos da web e React Native.

Existem outros recursos úteis que o Sass oferece , como módulos, mixins, funções, etc. Você pode verifique a documentação oficial para explorar mais a fundo . Até a próxima!