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
Top comments (1)
Tentei ser o mais claro e atualizado possível. Espero que gostem.