@fireflysemantics/sass-logger

Utility functions for logging with SASS.

Installation

npm i @fireflysemantics/sass-logger

Usage

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

Output

The above usage demo will output the following:

         50: #e8eaf6,  
         100: #c5cae9,  
         200: #9fa8da,  
         300: #7986cb,  
         400: #5c6bc0,  
         500: #3f51b5,  
         600: #3949ab,  
         700: #303f9f,  
         800: #283593,  
         900: #1a237e,  
         A100: #8c9eff,  
         A200: #536dfe,  
         A400: #3d5afe,  
         A700: #304ffe,  
 contrast: (  
         50: rgba(0, 0, 0, 0.87),  
         100: rgba(0, 0, 0, 0.87),  
         200: rgba(0, 0, 0, 0.87),  
         300: white,  
         400: white,  
         500: white,  
         600: white,  
         700: white,  
         800: white,  
         900: white,  
         A100: rgba(0, 0, 0, 0.87),  
         A200: white,  
         A400: white,  
         A700: white,  
 ),  
         default: #3f51b5,  
         lighter: #c5cae9,  
         darker: #303f9f,  
         text: #3f51b5,  
         default-contrast: white,  
         lighter-contrast: rgba(0, 0, 0, 0.87),  
         darker-contrast: white,  
         50-contrast: rgba(0, 0, 0, 0.87),  
         100-contrast: rgba(0, 0, 0, 0.87),  
         200-contrast: rgba(0, 0, 0, 0.87),  
         300-contrast: white,  
         400-contrast: white,  
         500-contrast: white,  
         600-contrast: white,  
         700-contrast: white,  
         800-contrast: white,  
         900-contrast: white,  
         A100-contrast: rgba(0, 0, 0, 0.87),  
         A200-contrast: white,  
         A400-contrast: white,  
         A700-contrast: white,  
         contrast-contrast: , 

Stackblitz

Stackblitz Demo