Pretty Printing the structure of nested SASS Maps?

Question

If we have nested maps in SASS (an Angular Theme for example) we can log the contents of it with @debug however it outputs everything in one line.

Anyone know if SASS has something that will pretty print the structure of nested maps?

So for example if we had:

$colors: (
  "primary": (
    "milk":       #fff,
    "cola":       #000,
    "mine-shaft": #232323,
  ),
  "secondary": (
    "pampas":      #f4f1ef,
    "pearl-brush": #e9e2dd,
    "alto":        #ddd,
  ),
);

We could do something like

@recursive-debug $colors

To log the structure of it.

Answer 1

I created a NPM package for this that is a SASS installable file.

npm i @fireflysemantics/sass-logger

https://www.npmjs.com/package/@fireflysemantics/sass-logger

This is from the usage section of the README.

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);

This is a stackblitz demo of the package.

https://stackblitz.com/edit/angular-r9tzuk-ov8kx4