@debug

<< @for y @while Sass indentada >>

Antes de comenzar a ver cómo funcionan las directivas para la depuración de errores, vamos a estudiar cómo ver los cambios que vamos realizando en nuestro proyecto y cómo saber si ha entrado en alguna directiva de @debug, @error o @warn. Para poder lanzar el observer con Vite será mirar el terminal que tiene el servidor ejecutándose, la otra opción es usar el comando de compilación de npm usando la opción --watch.

La directiva @debug, nos permite imprimir en la salida estándar de errores los valores de nuestro fichero de Sass. Esta directiva es bastante útil para la depuración de ficheros. La forma de usarlo es: @debug <expresión>. Ejemplo: @debug 10em + 12 em;

Nos muestra: scss/style.scss:1 Debug: 22em em

La etiqueta @warn nos imprime también por la salida estándar, esta etiqueta es bastante útil para mostrar avisos sobre funciones que estamos usando y están deprecated, o para mostrar algún error que tengamos al usar algún mixin o alguna función.

Hay dos diferencias principales entre el funcionamiento de @warn y @debug:

  • Podemos activar las advertencias (@warn)si compilamos a mano con la opción de línea de comandos o con --quiet, sino al usar esa etiqueta como el @debug te muestra en el terminal los warnings.
  • Se imprime una traza junto con el mensaje para que podamos ver cuáles son los estilos que causaron el warning (@warn).
@mixin border-radius($radius) {
    @warn "The `border-radius()` mixin will be deprecated in version 2.0.";
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}
.btn-a{
    @include border-radius(5px);
}

Warning: The `border-radius()` mixin will be deprecated in version 2.0.     scss/index.scss 2:2 border-radius(). scss/index.scss 11:2 root stylesheet

La directiva @error lanza el valor de una expresión SassScript como un error "fatal" incluyendo un seguimiento de la pila (no termina de compilar el código). Es útil para validar argumentos para mixin y funciones. Por ejemplo:

@mixin reflexive-position($property, $value) {
    @if $property != left and $property != right {
        @error "Property #{$property} must be either left or right.";
    }
}
.sidebar {
    @include reflexive-position(top, 12px);
}

[vite] Internal server error: [sass] "Property top must be either left or right."

<< @for y @while Sass indentada >>