Logging SASS Variables within Angular Projects

Scenario

We have defined a SASS variable in our angular project.

$theme-warn: mat.define-palette(mat.$orange-palette);

And we want to know what it contains.

Approach

$theme-warn: mat.define-palette(mat.$orange-palette);@debug $theme-warn;

In the below demo open src/theme.scss .

Check the console. The content of $theme-warn has been logged.

css:16 DEBUG: (50: #fff3e0, 100: #ffe0b2, 200: #ffcc80, 300: #ffb74d, 400: #ffa726, 500: #ff9800, 600: #fb8c00, 700: #f57c00, 800: #ef6c00, 900: #e65100, A100: #ffd180, A200: #ffab40, A400: #ff9100, A700: #ff6d00, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: rgba(0, 0, 0, 0.87), 600: rgba(0, 0, 0, 0.87), 700: rgba(0, 0, 0, 0.87), 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: black), default: #ff9800, lighter: #ffe0b2, darker: #f57c00, text: #ff9800, default-contrast: rgba(0, 0, 0, 0.87), lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: rgba(0, 0, 0, 0.87), "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": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": rgba(0, 0, 0, 0.87), "600-contrast": rgba(0, 0, 0, 0.87), "700-contrast": rgba(0, 0, 0, 0.87), "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": black, "contrast-contrast": null)
DEBUG: (50: #fff3e0, 100: #ffe0b2, 200: #ffcc80, 300: #ffb74d, 400: #ffa726, 500: #ff9800, 600: #fb8c00, 700: #f57c00, 800: #ef6c00, 900: #e65100, A100: #ffd180, A200: #ffab40, A400: #ff9100, A700: #ff6d00, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: rgba(0, 0, 0, 0.87), 600: rgba(0, 0, 0, 0.87), 700: rgba(0, 0, 0, 0.87), 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: black), default: #ff9800, lighter: #ffe0b2, darker: #f57c00, text: #ff9800, default-contrast: rgba(0, 0, 0, 0.87), lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: rgba(0, 0, 0, 0.87), "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": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": rgba(0, 0, 0, 0.87), "600-contrast": rgba(0, 0, 0, 0.87), "700-contrast": rgba(0, 0, 0, 0.87), "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": black, "contrast-contrast": null)
✔ Browser application bundle generation complete.

One thing we notice about this is that the entire map contained in one line. If we want separated key value pairs we can use Firefly Semantics SASS Logger.

Add the dependency to package.json .

"@fireflysemantics/sass-logger": "*"

And import it into styles.scss like this.

@use '@fireflysemantics/sass-logger' as logger;

We can now generate the structure like this:

$result: logger.pretty-map($theme);

And when we output that with @debug we get this.

         50: #fff3e0,  
100: #ffe0b2,
200: #ffcc80,
300: #ffb74d,
400: #ffa726,
500: #ff9800,
600: #fb8c00,
700: #f57c00,
800: #ef6c00,
900: #e65100,
A100: #ffd180,
A200: #ffab40,
A400: #ff9100,
A700: #ff6d00,
contrast: (
50: rgba(0, 0, 0, 0.87),
100: rgba(0, 0, 0, 0.87),
200: rgba(0, 0, 0, 0.87),
300: rgba(0, 0, 0, 0.87),
400: rgba(0, 0, 0, 0.87),
500: rgba(0, 0, 0, 0.87),
600: rgba(0, 0, 0, 0.87),
700: rgba(0, 0, 0, 0.87),
800: white,
900: white,
A100: rgba(0, 0, 0, 0.87),
A200: rgba(0, 0, 0, 0.87),
A400: rgba(0, 0, 0, 0.87),
A700: black,
),
default: #ff9800,
lighter: #ffe0b2,
darker: #f57c00,
text: #ff9800,
default-contrast: rgba(0, 0, 0, 0.87),
lighter-contrast: rgba(0, 0, 0, 0.87),
darker-contrast: rgba(0, 0, 0, 0.87),
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: rgba(0, 0, 0, 0.87),
400-contrast: rgba(0, 0, 0, 0.87),
500-contrast: rgba(0, 0, 0, 0.87),
600-contrast: rgba(0, 0, 0, 0.87),
700-contrast: rgba(0, 0, 0, 0.87),
800-contrast: white,
900-contrast: white,
A100-contrast: rgba(0, 0, 0, 0.87),
A200-contrast: rgba(0, 0, 0, 0.87),
A400-contrast: rgba(0, 0, 0, 0.87),
A700-contrast: black,
contrast-contrast: ,

Demo

This logs a formatted result using @fireflysemantics/sass-logger .

This demo logs the result all in one line.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation