O que é @use
A nova @useregra é a substituição @importque permite que outras folhas de estilo usem suas variáveis, funções e mixins.

O que diferencia a @useimportação é que o módulo (arquivo importado usando @use) só é importado uma vez, não importa quantas vezes você faça referência a ele em seu projeto.

Como usar @use
Importação Geral de Arquivos

A sintaxe para importar um arquivo é quase idêntica à que já estávamos acostumados com o @importmétodo.

Antes:@import ‘_buttons.scss’;

Depois:@use ‘_buttons.scss’;

Fazendo referência a membros

O novo sistema modular não disponibiliza globalmente todas as variáveis. Além disso, ele cria o que é chamado de namespaces para cada parcial/módulo, que é o nome do arquivo por padrão.

Isso significa que você deve anexar o nome da variável ao nome do namespace ao referenciá-la em sua folha de estilo. Isso ajuda com conflitos de nomenclatura caso você tenha o mesmo nome de variável em vários arquivos, como $widthin _card.scsse $widthin _button.scss.

Antes:

rodapé { 
   cor de fundo: $forestGreen; 
}

Depois:

rodapé { 
   cor de fundo: contants.$forestGreen; 
}

Alterando o Namespace (Referência)

Se digitar nomes parciais de folhas de estilo parecer muito trabalhoso, você pode modificar a referência do nome da seguinte maneira:

Ao importar: @use ‘constants.scss` as c;para alterar a referência do namespace.

Ao usar:background-color: c.$forestGreen;

ou

Ao importar: @use ‘constants.scss’ as *;para não precisar fazer referência a um namespace.

Ao usar:background-color: $forestGreen;

Dica: você também pode explorar usando a @forwardregra que não adiciona namespaces aos nomes. Isto é destinado principalmente a autores de bibliotecas que desejam expor apenas certas partes de seus sistemas ou quando você deseja agrupar várias partes individuais em um namespace. Leia mais sobre isso abaixo.

Variáveis ​​Privadas
Os membros que começam com — (hífen) ou _ (sublinhado) são privados da folha de estilo atual que foi importada usando a @useregra.

Por exemplo, você pode fazer referência a uma variável de cor privada nomeada $_primaryRedem sua _buttons.scssparcial que só estará acessível naquele arquivo, e não globalmente, digamos, em uma _footer.scssparcial em outro lugar.

Módulos Internos Integrados
Você pode ter usado funções integradas do Sass no passado, como adjust-huee map.get. A maioria destas funções integradas permanecerá disponível, mas não a nível global. Isso significa que você também precisará importar esses módulos usando a nova @useregra de importação.

@use “sass:color”;ou @use “sass:math”;ou@use “sass:map”;

Há um total de sete módulos integrados com funções muito úteis que você pode importar. Você pode ler mais sobre eles aqui .

Tipos de arquivo
Parciais

Arquivos parciais são formatados com um _ ( sublinhado ) no início do nome, como _.buttons.scss. Esses arquivos pretendem fazer parte de um sistema maior. Eles devem ser usados ​​como módulos e não compilados sozinhos. Normalmente tenho parciais acumulados em um arquivo do diretório principal (veja a próxima seção) que é agrupado por tipos de estilos.

Arquivos de índice

Os arquivos de índice são carregados automaticamente quando você carrega o URL da pasta na folha de estilo principal ( styles.scss).

No passado, você pode ter criado um arquivo de diretório parcial como _components-dir.scssaquele que pode ter importado ( @import) arquivos parciais como _labels.scsse _buttons.scss. Agora você simplesmente precisa inserir um @useou @forwardparcial em um _index.scssarquivo dentro dessa pasta e certificar-se de ter @useo nome da pasta, neste caso componentes , em seu styles.scssarquivo principal.

Seu arquivo de índice ficaria mais ou menos assim:

//componentes/_index.scss
@forward 'rótulos';
@forward 'botões';
Seu arquivo de estilo teria então @usea folha de estilo correspondente:

// estilos.scss
@use 'componente';
Nota: Sass também pode carregar .cssarquivos simples usando o mesmo @use ‘avatar’;formato! Apenas lembre-se de que arquivos simples .cssnão podem tirar proveito de variáveis, funções ou recursos de mixin especiais do Sass, mas podem ser estendidos usando extenduma folha de estilo Sass.

Regra @forward
Depois de algumas pesquisas, a @forwardregra é bastante interessante. O que ele faz é permitir que seus membros, como variáveis, de uma folha de estilo encaminhada sejam acessíveis fora da @usefolha de estilo que a importa.

O uso desta regra segue uma sintaxe semelhante às outras regras de importação:

@forward ‘list’;

Nota: Você pode incluir regras @usee @forwardpara o mesmo módulo no mesmo arquivo, mas é recomendado que você escreva a @forwardprimeira.

Conclusão
O novo sistema modular implementado @use está agora disponível a desde outubro de 2019. Em outubro de 2021 @import foi descontinuado, juntamente com as funções integradas globais, e um ano depois disso ( em outubro de 2022) o @import suporte será abandonado. Certifique-se de verificar a documentação do Sass recém-atualizada para obter as atualizações mais recentes.

Referencias:

https://www.youtube.com/watch?v=CR-a8upNjJ0&ab_channel=KevinPowell

https://sass-lang.com/documentation/at-rules/use/