Debugging no Sass

  1. Diretiva @debug
  2. Diretiva @warn
  3. Diretiva @error

Enquanto você estiver escrevendo seus estilos no Sass, pode ser que ocorra algum erro ou algum comportamento inesperado. Foi pensando nessas situações que o Sass criou algumas diretivas para que você possa fazer o debugging de suas folhas de estilo.

Diretiva @debug

Imprime o valor de uma expressão na output stream de erros padrão. Exemplo:

$x: 15em;
@debug $x;

Diretiva @warn

Essa diretiva também imprime sua saída na output stream de erros padrão, como a @debug. A principal diferença é o propósito. Ela é usada para fazer alertas, tais como alertas de depreciações. Exemplo: 

@warn "Alertando qualquer coisa";

Diretiva @error

A diretiva @error serve pra emitir erros. Um uso comum dela é na validação de argumentos. Exemplo: 

@function col-width($cols, $cols-row: 12) {
  @if type-of($cols) != number {
    @error "$cols deve ser um número.";
  }
  @if type-of($cols-row) != number {
    @error "$cols-row deve ser um número.";
  }

  @return percentage($cols / $cols-row);
}

aside {
  width: col-width(3);
  width: col-width('Lorraine');
}
Deixe seu review