Si tenemos mapas anidados en SASS (un tema angular, por ejemplo), podemos registrar su contenido con @debug sin embargo, genera todo en una sola línea.
¿Alguien sabe si SASS tiene algo que imprima bastante la estructura de los mapas anidados?
Entonces, por ejemplo, si tuviéramos:
$colors: ( "primary": ( "milk": #fff, "cola": #000, "mine-shaft": #232323, ), "secondary": ( "pampas": #f4f1ef, "pearl-brush": #e9e2dd, "alto": #ddd, ), );Podríamos hacer algo como
@recursive-debug $colorsRegistrar la estructura del mismo.
Creé un paquete NPM para esto que es un archivo instalable SASS.
npm i @fireflysemantics/sass-loggerhttps://www.npmjs.com/package/@fireflysemantics/sass-logger
Esto es de la sección de uso del LÉAME.
This demo will create a Angular Material Palette $theme-primary and log the contents by first using the logger to structure the map data containing the result and then outputting that result with @debug. @use '@angular/material' as mat; @use '@fireflysemantics/sass-logger' as logger; // ============================================ // Palettes: https://material.io/design/color/ // ============================================ $theme-primary: mat.define-palette(mat.$indigo-palette); $result: logger.pretty-map($theme-primary); @debug ($result); $theme: mat.define-light-theme($theme-primary, $theme-primary, $theme-primary); //$result: logger.pretty-map($theme);Esta es una demostración de stackblitz del paquete.