Skip to content
Advertisement

Pretty Printing the structure of nested SASS Maps?

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.

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

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement