漂亮地打印嵌套 SASS 地圖的結構？

Question

如果我們在 SASS 中嵌套了映射（例如 Angular 主題），我們可以使用@debug記錄它的內容，但它會在一行中輸出所有內容。

任何人都知道 SASS 是否有可以漂亮地打印嵌套地圖結構的東西？

例如，如果我們有：

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

我們可以做類似的事情

@recursive-debug $colors

記錄它的結構。

Answer 1

我為此創建了一個 NPM 包，它是一個 SASS 可安裝文件。

npm i @fireflysemantics/sass-logger

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

這來自自述文件的使用部分。

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

這是該軟件包的 stackblitz 演示。

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