@import e parciais em SASS | Explicado

Sass sigla para folha de estilo sintaticamente impressionante é um pré-processador e extensão do CSS, que é conhecido por seus arquivos de código limpo e legíveis que, como resultado. Sass permite que você escreva o código CSS seco (não se repita) através do uso da regra @import. O que é essa regra e faz no SASS, juntamente com parciais em Sass, são os assuntos em discussão neste artigo.

Qual é a regra @import em sass

Assim como o CSS, Sass também suporta a diretiva @import, que permite a inclusão de uma folha de estilo em outra. Como uma extensão da regra CSS @import, a regra Sass @import permite importar a importação .sass e .arquivos SCSS. Além disso, se você estiver importando uma folha de estilo em outra folha de estilo, essa regra dará acesso a variáveis, mixins e funções do arquivo importado para o outro arquivo.

Outra vantagem que essa regra de SASS tem sobre a regra CSS é que nenhuma solicitação HTTP adicional é feita no horário de execução quando a regra @import é chamada.

Sintaxe

@import filepath;

A regra Sass @import permite a inclusão de ambos. Além disso, você pode importar quantos arquivos desejar no arquivo principal. Os arquivos que podem ser importados incluem arquivos de redefinição, cores, variáveis, fontes, etc.

Alguns exemplos de @import regra em Sass são os seguintes.

@import "fontes";
@import "variáveis";
@import "cores";

Vejamos um exemplo para entender melhor esta regra.

Exemplo

Suponha que tenhamos um arquivo pelo nome File1.sass e parece algo assim.

Sass

H1
Fonte-família: Verdana, sem serrif;
tamanho da fonte: 30px;
cor roxa;

Também temos outro arquivo pelo nome File2.sass e tem o seguinte código.

Sass

P
Fonte-família: Times New Roman, Serif;
Size da fonte: 20px;
cor azul;

Agora queremos importar esses dois arquivos para outro arquivo com o nome principal.Sass. Usaremos a regra @import para fazer isso.

@import file1, file2

Depois de compilar este principal.arquivo sass nosso arquivo de saída CSS resultante aparecerá assim.

Os arquivos foram importados com sucesso!

Observação: O uso da regra @import é desencorajado porque causa conflitos de nomeação, pois dá acesso a todas as funções, variáveis, mixins, etc. para o outro arquivo. Além disso, isso também causa problemas de segurança.

Parciais em sass

Parciais em SASS são considerados como aqueles cujos nomes começam com um sublinhado e estes não são transpilados diretamente. Parcials são feitos apenas nessas circunstâncias quando você está importando um arquivo e não deseja que seu arquivo seja transpilado diretamente por Sass.

Sintaxe

_nome do arquivo;

Por exemplo, o arquivo mostrado abaixo é um “_font.Arquivo SCSS ”.

$ fontsize: 20px;
$ fontfamily: Times New Roman;
$ cor: azul;

O sublinhado inicial impede que este arquivo seja transpilente para fontes.CSS. No entanto, quando você deseja importar este arquivo, não use o sublinhado.

O sublinhado inicial impede que este arquivo seja transpilente para fontes.CSS. No entanto, quando você deseja importar este arquivo, não use o sublinhado.
@import "fontes"
H1
Size de fonte: $ fontsize;
alinhamento de texto; Centro;
Cor: $ cor;

Dessa forma, o arquivo SASS parcial será importado.

Conclusão

A diretiva SASS @Import permite a inclusão de uma folha de estilo em outra e dá acesso a variáveis, mixins, funções do arquivo importado para o outro arquivo. Além disso, nenhuma solicitação HTTP adicional é feita no horário de execução quando a regra @import é chamada. Enquanto isso, os parciais em SASS são considerados como aqueles arquivos cujos nomes começam com um sublinhado e estes não são transpilados diretamente quando você os importa. Ambas as entidades são discutidas em profundidade neste artigo.