@debug

Algumas vezes é útil ver o valor duma variável ou expressão enquanto estás a desenvolver a tua folha de estilo. É para isto que a regra @debug serve: é escrita como @debug <expression>, e imprime o valor daquela expressão, juntamente com o nome do ficheiro e o número da linha.

SCSS Syntax

@mixin inset-divider-offset($offset, $padding) {
  $divider-offset: (2 * $padding) + $offset;
  @debug "divider offset: #{$divider-offset}";

  margin-left: $divider-offset;
  width: calc(100% - #{$divider-offset});
}

Sass Syntax

@mixin inset-divider-offset($offset, $padding)
  $divider-offset: (2 * $padding) + $offset
  @debug "divider offset: #{$divider-offset}"

  margin-left: $divider-offset
  width: calc(100% - #{$divider-offset})

O formato exato da message da depuração varia de implementação à implementação. Isto é como se parece na Sass de Dart:

test.scss:3 Debug: divider offset: 132px

💡 Fato Divertido:

Tu podes passar qualquer valor para @debug, não apenas uma sequência de caracteres! Este imprime a mesma representação daquele valor de acordo com a função meta.inspect().