Sass - Diretivas de depuração

Descrição

A diretiva @debug detecta os erros e exibe os valores da expressão SassScript para o fluxo de saída de erro padrão.

Exemplo

A seguir está o arquivo de folha de estilo salvo com a extensão .scss, que é semelhante ao arquivo css.

debug.scss

$font-sizes: 10px + 20px;
$style: (
   color: #bdc3c7
);

.container {
   @debug $style;
   @debug $font-sizes;
}

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

sass --watch C:\ruby\lib\sass\debug.scss:debug.css

Quando você executa o comando acima, o arquivo debug.css é criado automaticamente. Sempre que você alterar o arquivo SCSS, o arquivo debug.css será atualizado automaticamente.

Resultado

Vamos realizar as etapas a seguir para ver como o código acima funciona e apresenta um erro de depuração -

  • Salve o código fornecido acima em debug.scss Arquivo.

  • Execute a linha de comando mencionada acima no prompt de comando.