@import

A Sass estende a regra @import da CSS com a habilidade de importar folhas de estilo de Sass e CSS, fornecendo acesso às misturas, funções, e variáveis e combinando vários ficheiros de folhas de estilo de CSS. Ao contrário das importações de CSS simples, que requerem que o navegador faça várias requisições de HTTP visto que desenha a tua página, as importações de Sass são manipuladas inteiramente durante a compilação.

As importações de Sass têm a mesma sintaxe que as importações de CSS, exceto que permitem que várias importações sejam separadas por vírgulas no lugar de exigir que cada uma tenha sua própria @import. Além disto, na sintaxe indentada, as URLs importadas são não precisam estar entre aspas.

⚠️ Atenção!

A equipa da Sass desencoraja o uso contínuo da regra @import. A Sass o retirará gradualmente durante os próximos poucos anos, e eventualmente o removerá da linguagem inteiramente. Prefira a regra @use. (Nota que apenas a Sass de Dart atualmente suporta @use. Os utilizadores de outras implementações devem usar a regra @import).

O Que Existe de Errado com a `@import`?

A regra @import tem um número de problemas sérios:

@import torna todas as variáveis, misturas, e funções globalmente acessíveis. Isto torna muito difícil para pessoas (ou ferramentas) dizerem onde alguma coisa é definida.
Uma vez que tudo é global, as bibliotecas devem adicionar um prefixo para todos os seus membros para evitar colisões de nomeação.
As [regras @extend] também são globais, o que a torna difícil predizer quais regras de estilo serão estendidas.
Cada folha de estilo é executada e sua CSS emitida toda vez que for importada com @import, o que aumenta o tempo de compilação e produz saída inchada.
Não existia maneira de definir membros privados ou seletores de espaço reservado que fossem inacessíveis às folhas de estilo posteriores.

O novo sistema de módulo e a regra @use abordam todos estes problemas.

Como Migro?

Escrevemos uma ferramenta de migração que converte automaticamente a maioria do código baseado na @import para código baseado na @use num instante. Apenas aponte-a os teus pontos de entrada e deixe-a executar!

  SCSS

  Sass

  CSS

  SCSS Syntax// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
// style.scss
@import 'foundation/code', 'foundation/lists';

  Sass Syntax// foundation/_code.sass
code
  padding: .25em
  line-height: 0

// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0



// style.sass
@import foundation/code, foundation/lists

  CSS Outputcode {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Quando a Sass importa um ficheiro, este ficheiro é avaliado como se seu conteúdo aparecesse diretamente no lugar da @import. Quaisquer misturas, funções, e variáveis do ficheiro importado são tornados disponíveis, e toda a sua CSS é incluída no ponto exato onde a @import foi escrita. Além disso, quaisquer misturas, funções, ou variáveis que foram definidas antes de @import (incluindo a partir de outras @import) estão disponíveis na folha de estilo importada.

⚠️ Atenção!

Se a mesma folha de estilo for importada mais de uma vez, será avaliada novamente toda vez. Se apenas define funções e misturas, isto normalmente não é um grande coisa, mas se contiver regras de estilo serão compiladas para CSS mais de uma vez.

Encontrando o FicheiroEncontrando o Ficheiro permalink

Não seria nada divertido escrever URLs absolutas para toda folha de estilo que importares, então o algoritmo da Sass para encontrar um ficheiro à importar torna-a um pouco mais fácil. Para começar, não tens de escrever explicitamente a extensão do ficheiro que quiseres importar; @import "variables" carregará automaticamente variables.scss, variables.sass ou variables.css.

⚠️ Atenção!

Para garantir que as folhas de estilo funcionem em todos os sistemas operativos, a Sass importa os ficheiros pela URL, e não pelo caminho do ficheiro. Isto significa que precisas de usar barras oblíquas, não barras oblíquas invertidas, mesmo quando estiveres no Windows.

Caminhos de CarregamentoCaminhos de Carregamento permalink

Todas as implementações de Sass permitem os utilizadores fornecerem caminhos de carregamentos: caminhos no sistema de ficheiro que a Sass procurará quando estiver a resolver as importações. Por exemplo, se passares node_modules/susy/sass como um caminho de carregamento, podes usar @import "susy" para carregar node_modules/susy/sass/susy.scss.

As importações serão sempre resolvidas referente ao atual ficheiro primeiro. Os caminhos de carregamento apenas serão usados se não existir nenhum ficheiro relativo que corresponde a importação. Isto garante que não possas acidentalmente desarrumar as tuas importações relativas quando adicionares uma nova biblioteca.

💡 Fato Divertido:

Ao contrário de algumas outras linguagens, a Sass não exige que uses ./ para importações relativas. As importações relativas estão sempre disponíveis.

ParciaisParciais permalink

Como uma convenção, os ficheiros de Sass que apenas estão destinados a serem importados, e não compilados por si mesmos, começam com _ (como em _code.scss). Estes são chamados de parciais, e dizem as ferramentas da Sass para não tentarem compilar estes ficheiros por si mesmos. Tu podes deixar de usar o _ quando importas um parcial.

Ficheiros de ÍndiceFicheiros de Índice permalink

Sass de Dart: ✓
LibSass: since 3.6.0
Sass de Ruby: since 3.6.0

Se escreveres um _index.scss ou _index.sass numa pasta, quando a própria pasta for importada este ficheiro será carregado no seu lugar:

  SCSS

  Sass

  CSS

  SCSS Syntax// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
// foundation/_index.scss
@import 'code', 'lists';
// style.scss
@import 'foundation';

  Sass Syntax// foundation/_code.sass
code
  padding: .25em
  line-height: 0

// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0



// foundation/_index.sass
@import code, lists
// style.sass
@import foundation

  CSS Outputcode {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Importadores PersonalizadosImportadores Personalizados permalink

Todas as implementações da Sass fornecem uma maneira de definir importadores personalizados, que controlam como as importações de @import localizam as folhas de estilos:

A Sass de Node e Sass de Dart na npm fornecem uma opção importer como parte de suas API de JavaScript.
A Sass de Dart na pub fornece uma classe Importer abstrata que pode ser estendida por um importador personalizado.
A Sass de Ruby fornece uma classe Importers::Base abstrata que pode ser estendida por um importador personalizado.

EncaixamentoEncaixamento permalink

As importações são normalmente escritas no alto nível duma folha de estilo, mas não têm de o ser. Elas também podem ser encaixadas dentro de regras de estilo ou regras de arroba de CSS simples. A CSS importada é encaixada naquele contexto, o que torna as importações encaixadas úteis para isolar um pedaço de CSS para um elemento especial ou consulta de media. Nota que as misturas, funções, e variáveis de alto nível definidas na importação encaixada ainda são definidas globalmente:

  SCSS

  Sass

  CSS

  SCSS Syntax// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}
// style.scss
.theme-sample {
  @import "theme";
}

  Sass Syntax// _theme.sass
pre, code
  font-family: 'Source Code Pro', Helvetica, Arial
  border-radius: 4px

// style.sass
.theme-sample
  @import theme


  CSS Output.theme-sample pre, .theme-sample code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

💡 Fato Divertido:

As importações encaixadas são muito úteis para isolar folhas de estilo de terceiro, mas se fores autor da folha de estilo que estás a importar, normalmente é uma melhor ideia escrever os teus estilos numa mistura e incluir esta mistura no contexto encaixado. Uma mistura pode ser usada de maneiras mais flexíveis, mas é mais claro quando olhas para a folha de estilo importada como está destinada a ser usada.

⚠️ Atenção!

A CSS nas importações encaixadas é avaliada como uma mistura, o que significa que quaisquer seletores de pai farão referência ao seletor no qual a folha de estilo está encaixada:

SCSS

Sass

CSS

SCSS Syntax// _theme.scss
ul li {
  $padding: 16px;
  padding-left: $padding;
  [dir=rtl] & {
    padding: {
      left: 0;
      right: $padding;
    }
  }
}
// style.scss
.theme-sample {
  @import "theme";
}

Sass Syntax// _theme.sass
ul li
  $padding: 16px
  padding-left: $padding
  [dir=rtl] &
    padding:
      left: 0
      right: $padding



// style.sass
.theme-sample
  @import theme


CSS Output.theme-sample ul li {
  padding-left: 16px;
}
[dir=rtl] .theme-sample ul li {
  padding-left: 0;
  padding-right: 16px;
}

Importando CSSImportando CSS permalink

Sass de Dart: since 1.11.0
LibSass: partial
Sass de Ruby: ✗

A LibSass suporta a importação de ficheiros com extensão .css, mas contrário a especificação são tratadas como ficheiros de SCSS no lugar de serem analisadas como CSS. Este comportamento tem sido depreciado, e uma atualização está em curso para suportar o comportamento descrito abaixo.

Além de importar ficheiros .sass e .scss, a Sass pode importar os velhos simples ficheiros .css. A única regra é que a importação não deve explicitamente incluir a extensão .css, porque isto costumava a indicar uma importação de @import da CSS simples:

  SCSS

  Sass

  CSS

  SCSS Syntax// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.scss
@import 'code';

  Sass Syntax// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.sass
@import code

  CSS Outputcode {
  padding: .25em;
  line-height: 0;
}

Os ficheiros de CSS importados pela Sass não permitem quaisquer funcionalidades de Sass especiais. Para garantir que os autores não escrevam acidentalmente a Sass na sua CSS, todas as funcionalidades de Sass que também não são CSS válidas produzirão erros. De outro modo, a CSS será compilada como está. Isto pode mesmo ser estendido!

Importações de `@import` de CSS simplesImportações de @import de CSS simples permalink

Sass de Dart: ✓
LibSass: partial
Sass de Ruby: ✓

Por padrão, a LibSass lida com as importações de CSS simples corretamente. No entanto, quaisquer importações personalizada aplicar-se-ão incorretamente às regras @import de CSS simples, tornado possível para estas regras carregar ficheiros de Sass.

Uma vez que @import também é definida na CSS, a Sass precisa duma maneira de compilar as importações de @import de CSS simples sem tentar importar os ficheiros em tempo de compilação. Para conseguir isto, e garantir que a SCSS seja um superconjunto da CSS tanto quanto possível, a Sass compilará quaisquer importações de @import com as seguintes características para as importações de CSS simples:

Importações onde a URL termina com .css.
Importações onde a URL começa com http:// ou https://.
Importações onde a URL é escrita como uma url().
Importações que tem consultas de media.

  SCSS

  Sass

  CSS

  SCSS Syntax@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

  Sass Syntax@import "theme.css"
@import "http://fonts.googleapis.com/css?family=Droid+Sans"
@import url(theme)
@import "landscape" screen and (orientation: landscape)

  CSS Output@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

InterpolaçãoInterpolação permalink

Embora as importações de Sass não podem usar interpolação (para garantir seja sempre possível dizer de onde as misturas, funções, e variáveis vêm), as importações de CSS simples podem. Isto torna possível gerar dinamicamente importações, por exemplo baseadas nos parâmetros de mistura:

  SCSS

  Sass

  CSS

  SCSS Syntax@mixin google-font($family) {
  @import url("http://fonts.googleapis.com/css?family=#{$family}");
}

@include google-font("Droid Sans");

  Sass Syntax@mixin google-font($family)
  @import url("http://fonts.googleapis.com/css?family=#{$family}")

@include google-font("Droid Sans")

  CSS Output@import url("http://fonts.googleapis.com/css?family=Droid Sans");

Importação e MódulosImportação e Módulos permalink

Sass de Dart: since 1.23.0
LibSass: ✗
Sass de Ruby: ✗

Atualmente apenas a Sass de Dart suporta @use. Os utilizadores de outras implementações devem usar a regra @import.

O sistema de módulo da Sass integra-se perfeitamente com a @import, quer estejas a importar um ficheiro que contém regras @use ou a carregar um ficheiro que contém importações como um módulo. Nós queremos tornar a transição de @import para @use a mais suave possível.

Importando um Ficheiro de Sistema de MóduloImportando um Ficheiro de Sistema de Módulo permalink

Quando importas um ficheiro que contém regras @use, a importação do ficheiro tem acesso à todos os membros (mesmo os membros privados) definidos diretamente neste ficheiro, mas não quaisquer membros a partir dos módulos que o ficheiro tenha carregado. No entanto, se este ficheiro contiver regras @forward, a importações de ficheiro terá acesso aos membros expedidos. Isto significa que podes importar uma biblioteca que foi escrita para ser usada com o sistema de módulo.

⚠️ Atenção!

Quando um ficheiro com as regras @use for importado, toda a CSS transitivamente carregada por estas for incluída na folha de estilo resultante, mesmo se já tivesse sido incluída por uma outra importação. Se não fores cuidadoso, isto pode resultar em saída de CSS inchada!

Ficheiros só para ImportaçãoFicheiros só para Importação permalink

Uma API que faz sentido para @use pode não fazer sentido para @import. Por exemplo, @use adiciona um espaço de nome para todos os membros por padrão assim podes seguramente usar nomes curtos, mas a @import não então podes precisar de algo mais longo. Se fores um autor de biblioteca, podes estar preocupado com o fato de, se atualizares a tua biblioteca para usar o novo sistema de módulo, os teus utilizadores baseados em @import existente quebrarão.

Para tornar isto mais fácil, a Sass também suporta ficheiros só para importação. Se nomeares um ficheiro <name>.import.scss, apenas será carregado para importações, não para os usos de @use. Desta maneira, podes reter compatibilidade para os utilizadores de @import enquanto ainda forneces uma boa API para os utilizadores do novo sistema de módulo:

  SCSS

  Sass

  SCSS Syntax// _reset.scss

// Os utilizadores do sistema de módulo escrevem `@include reset.list()`.
@mixin list() {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
// _reset.import.scss

// Os utilizadores da importação legada podem continuar a escrever `@include reset-list()`.
@forward "reset" as reset-*;

  Sass Syntax// _reset.sass

// Os utilizadores do sistema de módulo escrevem `@include reset.list()`.
@mixin list()
  ul
    margin: 0
    padding: 0
    list-style: none


// _reset.import.sass

// Os utilizadores da importação legada podem continuar a escrever `@include reset-list()`.
@forward "reset" as reset-*

Configurando Módulos Através de ImportaçõesConfigurando Módulos Através de Importações permalink

Sass de Dart: since 1.24.0
LibSass: ✗
Sass de Ruby: ✗

Tu podes configurar módulos que são carregados através duma @import definindo variáveis globais antes da @import que carrega este módulo pela primeira vez:

  SCSS

  Sass

  CSS

  SCSS Syntax// _library.scss
$color: blue !default;

a {
  color: $color;
}
// _library.import.scss
@forward 'library' as lib-*;
// style.sass
$lib-color: green;
@import "library";

  Sass Syntax$color: blue !default

a
  color: $color


// _library.import.sass
@forward 'library' as lib-*
// style.sass
$lib-color: green
@import "library"

  CSS Outputa {
  color: green;
}

⚠️ Atenção!

Os módulos apenas são carregados uma vez, assim se mudares a configuração depois de importares um módulo com @import pela primeira vez (mesmo que indiretamente), a mudança será ignorada se importares o módulo com @import novamente.

Carregando um Módulo que Contém ImportaçõesCarregando um Módulo que Contém Importações permalink

Quando usas @use (ou @forward) para carregar um módulo que usa @import, este módulo conterá todos os membros públicos definidos pela folha de estilo que carregas e tudo que a folha de estilo transitivamente importa. Em outras palavras, tudo que é importado é tratado como se estivessem escritos em uma grande folha de estilo.

Isto facilita a conversão e o começo do uso de @use numa folha de estilo mesmo antes de todas as bibliotecas das quais dependem terem convertido para o novo sistema de módulo. Esteja atento, que se elas converterem suas APIs também podem mudar!

@import

⚠️ Atenção!

O Que Existe de Errado com a @import?

Como Migro?

SCSS Syntax

Sass Syntax

CSS Output

⚠️ Atenção!

Encontrando o FicheiroEncontrando o Ficheiro permalink

⚠️ Atenção!

Caminhos de CarregamentoCaminhos de Carregamento permalink

💡 Fato Divertido:

ParciaisParciais permalink

Ficheiros de ÍndiceFicheiros de Índice permalink

SCSS Syntax

Sass Syntax

CSS Output

Importadores PersonalizadosImportadores Personalizados permalink

EncaixamentoEncaixamento permalink

SCSS Syntax

Sass Syntax

CSS Output

💡 Fato Divertido:

⚠️ Atenção!

SCSS Syntax

Sass Syntax

CSS Output

Importando CSSImportando CSS permalink

SCSS Syntax

Sass Syntax

CSS Output

Importações de @import de CSS simplesImportações de @import de CSS simples permalink

SCSS Syntax

Sass Syntax

CSS Output

InterpolaçãoInterpolação permalink

SCSS Syntax

Sass Syntax

CSS Output

Importação e MódulosImportação e Módulos permalink

Importando um Ficheiro de Sistema de MóduloImportando um Ficheiro de Sistema de Módulo permalink

⚠️ Atenção!

Ficheiros só para ImportaçãoFicheiros só para Importação permalink

SCSS Syntax

Sass Syntax

Configurando Módulos Através de ImportaçõesConfigurando Módulos Através de Importações permalink

SCSS Syntax

Sass Syntax

CSS Output

⚠️ Atenção!

Carregando um Módulo que Contém ImportaçõesCarregando um Módulo que Contém Importações permalink

O Que Existe de Errado com a `@import`?

Importações de `@import` de CSS simplesImportações de @import de CSS simples permalink