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