[英]Pretty Printing the structure of nested SASS Maps?
如果我们在 SASS 中嵌套了映射(例如 Angular 主题),我们可以使用@debug
记录它的内容,但它会在一行中输出所有内容。
任何人都知道 SASS 是否有可以漂亮地打印嵌套地图结构的东西?
例如,如果我们有:
$colors: (
"primary": (
"milk": #fff,
"cola": #000,
"mine-shaft": #232323,
),
"secondary": (
"pampas": #f4f1ef,
"pearl-brush": #e9e2dd,
"alto": #ddd,
),
);
我们可以做类似的事情
@recursive-debug $colors
记录它的结构。
我为此创建了一个 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 演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.