Importando arquivos no Sass

Introdução

Assim como o CSS, o Sass também permite importar arquivos usando @import. Essa diretiva serve tanto para importar arquivos CSS como arquivos de Sass. Geralmente, o Sass entende que você quer importar arquivos dele quando você usa essa diretiva. As exceções ocorrem apenas quando:

• a extensão do arquivo importado for .css
• media queries forem usadas
• o arquivo usar o protocolo http://
• o arquivo usar url()

Abaixo, há um exemplo que mostra cada um desses casos:

@import "example.css";
@import "http://domain.com/example.css";
@import url(diretorio/exemplo);
@import "example" print;

Em qualquer outro caso, o Sass vai entender que você quer importar um arquivo .sass ou .scss. Se você não colocar a extensão do arquivo, ele vai procurar pelas duas extensões. Exemplo:

@import "example";

Você também pode importar vários arquivos de uma vez, separando os arquivos por vírgulas:

@import "example.scss", "example2.sass", "example3";

Parciais

Parciais são arquivos que são incluídos, mas não transpilam para arquivos CSS. Para incluir um parcial, você precisa seguir uma convenção de nomenclatura, que é colocar um underline no início do nome de cada arquivo. Ao fazer a importação, você não precisa colocar o underline (é opcional). O exemplo abaixo assume que há um arquivo parcial _example.sass:

@import "example.sass";