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.
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.