Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=726a8739-3e11-43e1-b3df-68c035340416

SASS: ¿Cómo puedo depurar mis archivos .scss?

Imagen ornamental

El uso de preprocesadores de CSS nos permite superar las limitaciones del lenguaje (falta de reutilización, lógica, etc...) y construir hojas de estilo mucho más poderosas, reutilizables e incluso con lógica avanzada, funciones, etc... para llevar nuestro código CSS a un nivel superior. No en vano se utiliza en todo el desarrollo web profesional, dejando las hojas de estilo CSS para proyectos sencillos. Dentro de estos preprocesadores el más utilizado es sin duda Sass (Syntactically Awesome Style Sheets) y, en concreto, su variante SCSS.

Durante el desarrollo con Sass, en ocasiones la cosa se puede complicar, por lo que puede resultar útil obtener información sobre el valor de ciertas variables, mostrar algún mensaje en medio del proceso de una función o mixin, o incluso detener el procesamiento completo del archivo SCSS si fuese necesario.

Para ello Sass nos ofrece tres directivas específicas:

  • @warn: nos permite mostrar un mensaje en la consola, sustituyendo variables si es necesario, para indicar cualquier información que necesitemos. Se muestra en la consola durante el procesamiento del archivo.
  • @error: es idéntica a la anterior pero mucho más restrictiva; además de mostrar el mensaje detiene el procesado del código SCSS.
  • @debug: se utiliza dentro de selectores de estilo y muestra el valor de una variable que le pongamos a continuación.

Por ejemplo, consideremos el siguiente fragmento de SCSS con una variable y una función para asignar colores solo dentro de una lista determinada:

$colores: (
  rojo: #FF5500,
  azul: #0055FF,
);

@function ponColor($color) {
  @if map-has-key($colores, $color) {
    @return map-get($colores, $color);
  }

  @error "El color: `#{$color}` que has pasado no está disponible.";
}

Si ahora intentamos hacer una asignación como esta:

.amarillo {
  color: ponColor(amarillo);
}

Dado que el color "amarillo" no está definido, al intentar compilarlo a CSS, veremos por pantalla algo similar a esto:

Imagen del error mostrado en la consola

Que detiene el procesamiento porque intentamos utilizar un color no permitido.

Podríamos haber utilizado un @warn y devolver un valor por defecto, lo cual no detendría la ejecución.

En cuanto a @debug podríamos hacer algo así:

$rojo-oscuro: darken(#ff0000, 10%);

.rojoOscuro {
    @debug $rojo-oscuro;
    color: $rojo-oscuro;
}

En este caso, mostraríamos por consola el valor asociado a la variable $rojo-oscuro, además de utilizarla para asignar el color en un selector, viendo esto en la consola:

Resultado en la consola de @debug

Esto se suele utilizar solamente para depuraciones internas, mientras estamos trabajando con un archivo. Los anteriores, sin embargo, se utilizan cuando creamos archivos que se van a reutilizar y queremos mandar mensajes de advertencia o error cuando los utilicen otras personas del equipo.

Puedes aprender SASS y muchas otras cosas más (npm, Gulp, Webpack, TypeScript...) en nuestro curso de Herramientas Avanzadas para desarrollo Web Front-End.

José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.