漂亮打印嵌套 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

这是来自 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);

这是包的 stackblitz 演示。

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

漂亮打印嵌套 SASS 地图的结构？

Pretty Printing the structure of nested SASS Maps?

javascript

css

sass

node.js

angular