Para detectar los errores en SASS , se debe usar la directiva @debug . Muestra los valores de expresión de SassScript. Se puede usar cuando alguien quiere ver el valor de una variable o expresión mientras desarrolla el archivo.
Veamos un ejemplo para que conozcamos más información sobre la directiva @debug de forma práctica. Simplemente siga estos pasos para conocer la implementación:
- Primero cree un archivo SASS, para este ejemplo, lo he llamado debug.scss .
- Ahora define algunas variables con su valor.
CSS
$style: (color:#00FF00);$font-sizes:15px+5px;.container {@debug $style;@debug $font-sizes;} - El siguiente comando comenzará a buscar cambios en el archivo SASS y generará automáticamente el archivo CSS respectivo.
sass --watch debug.scss:debug.css
- La salida mostrará el código que ha depurado usando la directiva @debug:
Ejemplo: Veamos otro ejemplo para tener una idea clara al respecto. Siga los mismos pasos que arriba.
CSS
$width: 350px;
$colors: (
IndianRed: #CD5C5C,
Salmon: #FA8072,
LightCoral: #F08080
);
$font-sizes: heading, p, sm;
.container{
@debug $width; /* single value */
@debug $colors; /* map */
@debug $font-sizes; /* list */
}
Producción:
