En este artículo, veremos el uso de las directivas @error y @debug en SASS. Sass es una extensión de CSS que significa hojas de estilo sintácticamente asombrosas. Nos ayuda a crear cosas como variables, reglas anidadas, etc. para que podamos reutilizar el código en múltiples elementos.
La directiva @error
Sass consta de tres directivas que se utilizan para proporcionar comentarios a los desarrolladores. Uno de ellos es la directiva @error . Se utiliza cuando desea mostrar errores. Detiene por completo el compilador de Sass y muestra los valores de expresión de SassScript como errores fatales. Podemos usar esta directiva para enviar un mensaje a los desarrolladores para que puedan detenerse y corregir sus errores de inmediato. Ayuda a los desarrolladores a conocer sus errores en el código, ya que Sass también proporciona el número de línea donde ocurre el error junto con la salida @error.
Ejemplo: a continuación se muestra el archivo de hoja de estilo denominado Error.scss guardado con la extensión .scss, que es similar al archivo CSS.
$color: green;
@error "Invalid color: '#{$color}'.";
El siguiente comando comenzará a buscar cambios en el archivo SASS y generará automáticamente el archivo CSS respectivo.
sass --watch Error.scss:Error.css
Producción:
La directiva @debug
La directiva @debug muestra los valores de expresión de SassScript. Imprime el valor de la expresión, nombre de archivo junto con el número de línea. Esta directiva se puede usar cuando el desarrollador quiere ver el valor de una variable o expresión mientras desarrolla la hoja de estilo. Por lo tanto, @debug imprime el valor de cualquier expresión de Sass que contenga (variable, matemática, etc.) en la consola para el desarrollador. Es ideal para trabajos de depuración personal.
Ejemplo: a continuación se muestra el archivo de hoja de estilo denominado debug.scss guardado con la extensión .scss, que es similar al archivo CSS.
$color-green: #00FF00;
$font-sizes: 25px + 20px;;
.container {
@debug $color-green;
@debug $font-sizes;
@debug "GeeksforGeeks";
}
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
Producción:
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA