Importação @import e Partials Sass

O Sass pode manter o código CSS seco (DRY，Don't Repeat Yourself，não repetir).

Uma maneira de escrever código DRY é armazenar código relacionado em arquivos separados.

Você pode usar fragmentos CSS para criar arquivos pequenos e incluí-los em outros arquivos Sass. Por exemplo, esses arquivos podem ser: arquivos de reset, variáveis, cores, fontes, etc.

Importação de arquivos Sass

Como o CSS, o Sass também suporta @import instrução.

@import instrução permite que você inclua o conteúdo de um arquivo em outro.

Devido a problemas de desempenho, o CSS @import A instrução tem uma grande desvantagem; cada vez que ela é chamada, uma chamada HTTP adicional é criada. No entanto, o Sass @import A instrução inclui o arquivo no CSS; portanto, não é necessário realizar chamadas HTTP adicionais ao executar!

Sintaxe de importação Sass:

@import nome_do_arquivo;

Dica:Você não precisa especificar a extensão do arquivo, o Sass assume automaticamente que você está se referindo a um arquivo .sass ou .scss. Você também pode importar arquivos CSS.@import A instrução de importação de arquivo, que permite usar qualquer variável ou mixin definida no arquivo importado no arquivo principal.

Você pode importar qualquer quantidade de arquivos no arquivo principal:

Exemplo

@import "variables";
@import "cores";
@import "reset";

Vamos ver um exemplo: suponhamos que temos um arquivo de reset chamado "reset.scss", que parece assim:

Sintaxe SCSS (reset.scss):

html,
corpo,
ul,
ol {
  margem: 0;
  margem: 0;
}

Agora我们要将 "reset.scss" 文件导入 para outro arquivo chamado "standard.scss".

Fazemos assim: geralmente adicionamos no topo do arquivo @import instrução; assim, seu conteúdo terá escopo global:

Sintaxe SCSS (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  cor: vermelho;
}

Portanto, quando o arquivo "standard.css" é traduzido, o CSS será assim:

Saída CSS:

html, corpo, ul, ol {
  margem: 0;
  margem: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  cor: vermelho;
}

Sass Partials (arquivos parciais)

Por padrão, o Sass traduz diretamente todos os arquivos .scss. No entanto, ao importar arquivos, você não precisa que eles sejam traduzidos diretamente.

O Sass tem um mecanismo: se você começar o nome do arquivo com sublinhado, o Sass não o traduzirá. Arquivos nomeados dessa forma são chamados de partials no Sass.

Portanto, os arquivos partial Sass são nomeados com sublinhado à frente:

Sintaxe de Partial Sass:

_filename;

O exemplo a seguir mostra o arquivo partial Sass chamado "_cores.scss". (Este arquivo não será convertido diretamente para "cores.css"):

Exemplo

"_cores.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Agora, se você importar esse arquivo partial, omita o sublinhado. A compreensão do Sass é que ele deve importar o arquivo "_cores.scss":

Exemplo

@import "cores";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  cor: $myBlue;
}