Interpolação

A interpolação pode ser usada praticamente em qualquer parte numa folha de estilo de Sass para fixar o resultado duma expressão de SassScript em um pedaço de CSS. Apenas envolva uma expressão em #{} em alguns dos seguintes lugares:

SCSS Syntax

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);

Sass Syntax

@mixin corner-icon($name, $top-or-bottom, $left-or-right)
  .icon-#{$name}
    background-image: url("/icons/#{$name}.svg")
    position: absolute
    #{$top-or-bottom}: 0
    #{$left-or-right}: 0



@include corner-icon("mail", top, left)

CSS Output

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

Na SassScriptNa SassScript permalink

Compatibilidade (Sintaxe Moderna):
Sass de Dart
✓
LibSass
✗
Sass de Ruby
since 4.0.0 (unreleased)

A LibSass e a Sass de Ruby atualmente usam uma sintaxe mais antiga para analise de interpolação em SassScript. Para os propósitos mais práticos funciona da mesma maneira, mas pode comportar-se estranhamente em volta dos operadores. Consulte este documento por detalhes.

A interpolação pode ser usada na SassScript para injetar SassScript para sequências de caracteres sem aspas. Isto é particularmente útil quando geramos os nomes dinamicamente (por exemplo, para animações), ou quando usamos valores separados por barra. Nota que a interpolação na SassScript sempre retornam um sequência de caracteres sem aspas.

SCSS Syntax

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}

Sass Syntax

@mixin inline-animation($duration)
  $name: inline-#{unique-id()}

  @keyframes #{$name}
    @content


  animation-name: $name
  animation-duration: $duration
  animation-iteration-count: infinite


.pulse
  @include inline-animation(2s)
    from
      background-color: yellow
    to
      background-color: red

CSS Output

.pulse {
  animation-name: inline-uifpe6h;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uifpe6h {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}

💡 Fato Divertido:

A interpolação é útil para injeção de valores em sequências de caracteres, mas outro senão este é raramente necessário nas expressões de SassScript. Tu definitivamente não precisas disto para apenas usar uma variável num valor de propriedade. Ao invés de escrever color: #{$accent}, podes apenas escrever color: $accent!

⚠️ Atenção!

É praticamente sempre uma má ideia usar interpolação com números. A interpolação retorna sequências de caracteres sem aspas que não podem ser usadas para nenhuma matemática adiante, e impedi as salvaguardas embutidas da Sass de garantir que as unidades são usadas corretamente.

A Sass tem poderosa unidade aritmética que podes usar. Por exemplo, ao invés de escrever #{$width}px, escreva $width * 1px—ou melhor ainda, declare a variável $width em termos de px para começar. Desta maneira se $width já tem unidades, receberás um boa mensagem de erro ao invés de compilar CSS fictícia.

Sequências de Caracteres Com AspasSequências de Caracteres Com Aspas permalink

Na maioria dos casos, a interpolação injeta o mesmo exato texto que seria usado se a expressão fosse usada como um valor de propriedade. Mas existe uma exceção: as aspas envolta das sequências de caracteres com aspas são removidas (mesmo se estas sequências de caracteres com aspas estiverem em listas). Isto torna possível escrever sequências de caracteres com aspas que contém sintaxe que não é permitida na SassScript (como seletores) e interpole-os em regras de estilo.

SCSS Syntax

.example {
  unquoted: #{"string"};
}

Sass Syntax

.example
  unquoted: #{"string"}

CSS Output

.example {
  unquoted: string;
}

⚠️ Atenção!

Embora seja tentador usar esta funcionalidade para converter sequências de caracteres com aspas em sequências de caracteres sem aspas, é muito mais claro usar a função string.unquote(). No lugar de #{$string}, escreva string.unquote($string)!