How to beautifully display the hierarchy of nested SASS Maps?

In the realm of SASS programming, particularly within an Angular Theme framework, when dealing with nested maps it is possible to use @debug to log their contents. However, this method currently outputs the information on a single line.

Is there a feature in SASS that allows for a more visually organized and formatted output of nested maps?

For instance, given the following example:

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

It would be beneficial to have a function like this:

@recursive-debug $colors

This functionality would enable us to efficiently log and analyze the structure of the nested map.

javascriptcssnode.jsangularsass

Answer №1

A NPM package has been developed for easy installation of SASS files.

npm i @fireflysemantics/sass-logger

Check out the NPM package here!

Instructions on how to use this package can be found in the README section.

In this demo, an Angular Material Palette $theme-primary is created and the contents are logged using a specialized logger function in SASS.

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

Experience the functionality of the package through this StackBlitz demo.

View the demo on StackBlitz!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Store live text field group in their respective index

I am working on a project that involves creating dynamic description textareas based on the value selected from a dropdown list. The dropdown list contains numbers 1 through 5, and for each number chosen, I need to generate corresponding textareas with ser ...

javascriptasp.net-mvc-4

Proceed to the section with modal

My goal is to create a modal with 4 sections, each loading its content dynamically using the .load() function to the container on the right side. The challenge I'm facing is that I have a footer menu that triggers the modal to open, and I need it to ...

javascriptjqueryhtmlcssajax

Mastering the art of chaining promises in Mongoose

I need help figuring out how to properly chain promises for a "find or create" functionality using mongodb/mongoose. So far, I've attempted the following: userSchema.statics.findByFacebookIdOrCreate = function(facebookId, name, email) { var self = ...

javascriptnode.jsmongodbmongoosepromise

Utilizing Firebase messaging onMessage function is exclusively enabled within a window environment

Incorporating Firebase Cloud Messaging into my project allowed me to send and receive push notifications successfully. While I can receive the push notifications, unfortunately, I am encountering issues with getting the notification events to function prop ...

javascriptfirebasevue.jsvuejs2firebase-cloud-messaging

Generate an array containing all N-digit numbers with a sum of digits equal to S

I encountered a problem with my code translation process. Despite finding solutions in other languages, when I converted them to javascript, the expected array was not created. const find_digits = (n, sum, out, index) => { if (index > n || sum & ...

javascriptarraysnode.jsrecursion

Exploring the functionality of arrays in Mongoose

Just starting out with JavaScript and from what I understand, you can access an object within an array using the syntax arrayName[index].property Let's look at this example: var UserSchema = new mongoose.Schema({ email: { required: true, ...

node.jsmongodbexpressmongoose

"Enhance the visualization of your data with Apexcharts by accurately coloring the columns

When attempting to color the graphic using an array, only one color is applied to all three columns, despite declaring a different color for each column. options: { chart: { type: 'bar', id: 'chart', }, colors: ['#3 ...

javascriptvue.jsquasar-framework

What sets apart async.map from the async library and Promise.map from bluebird?

Allow me to clarify: My goal is to utilize async/await functionality with either the async or bluebird library. I'm puzzled as to why this code snippet works as expected: const promises = Promise.map (someArray, async item => { ...

javascriptnode.jsasync-awaitbluebirdasync.js

Tips on handling a JSON string alert

Can someone guide me on how to extract a specific value from a JSON string I received in an alert message? The JSON string looks like this: {"Error":true, "data":["not available","somethinghere"]} The JSON string is obtained from an alert using the follow ...

javascripthtmljson

Mobile device causing HTML margins to shrink

I've attempted to utilize a few posts here that discuss resizing for mobile devices, but unfortunately, I'm having trouble getting it to work correctly. The margins are causing all the elements to be squished together when viewing the site on a m ...

htmlcss

What does the JS Array Filter function return?

Is it necessary to include a return statement in the filter function when NOT using ES6 arrow syntax? Could the two separate filter functions be combined into one for efficiency? cars.filter(function(car, index) { return car[0].setAttribute("data-ori ...

javascriptjqueryarrays

Developing dynamic 3D cubes

In my latest project, I am attempting to construct a unique structure composed of 3D cubes arranged in a stacked formation. Each of the individual cubes within this structure is designed to be interactive for users. When a user hovers over a cube, it trigg ...

javascriptjquerycanvas3d

Utilize jQuery to showcase images on your webpage

There seems to be an issue with image display - sometimes the selected image does not show up until clicked a second time. Using jQuery $('#morefiles').change(function (event) { if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test($(this).val())) { ...

javascriptjqueryangularjs

Is it possible to consistently show the placeholder in mat-select regardless of the item currently selected?

I am looking to keep the mat-select element displaying the placeholder at all times, even if an option has been selected. Below is my HTML code: <mat-select [formControlName]="'language'" placeholder="Language"> <mat-option value=" ...

htmlangularangular-material

Retrieve information from nested arrays that are two levels down using sub-indices

My current json schema looks like this: "header": { "self": {}, "items": [ { "_id": "5ec7e61979ec9914ecefc539", "title": "Test", "root": "true", "alignment": "le ...

node.jsmongodb

Managing visual content on a live server

As a beginner working with MERN, I have managed to deploy the frontend and backend separately for testing. When a user signs up, they can choose a profile picture. This process works smoothly on localhost as the image successfully gets added to the mongodb ...

node.jsreactjsmongodbhostingcloudinary

What is the purpose of using square brackets in a CSS style declaration?

I've recently taken over the management of a website and I came across some unfamiliar CSS syntax. Has anyone encountered this type of syntax before? Can someone explain what the square brackets inside a style represent? Thank you, Rob .trigger-tx ...

css

A guide to applying ngClass to spans using ngFor according to the value stored in localStorage

When I try to add the active-span class to an element after selecting a size, it's easy to do with jQuery but I'm finding it a bit confusing when trying to achieve the same in Angular. The goal is to have the active-span class added when a size ( ...

javascriptjqueryangular

What is the quickest method for upgrading node and npm?

Despite my numerous online searches, I am still unable to get it to work. Can someone clarify if my understanding is correct? To upgrade npm to the latest version: npm install npm@latest -g To update node to the latest version: Visit the official webs ...

node.jsnpm

I am struggling to assign the height style attribute to a div element

I have created the code below where I am attempting to set a div to 'display: flex' and include two divisions, one with a width of 200px and the other with a width of 100%. <div style="clear:both;display:flex; height: 100%;"> <div ...

htmlcssflexbox