Sass Debugger
I have created a open source project which helps to debug your html with some custom options. Take a look at DEMO.
Imagine that you want to know how many style atributtes are in your html, ou simply finding some especifics DOM Elementeither especific class. What could you do?
Search inside your html file is not the best way, but if you can do that in visual and simpler way? Sass Debugger provides a way to debug your project with a visual highlight style preview based in some options that you can customize.
See how it works:
$outline: true; /*element's border option*/
$tags: (none); /*DOM elements*/
$attrs: (style); /*element's attributes like style, data-*, alt...*/
$classes: (none); /*DOM element's class*/By default these are the options available inside the scss file.
Lets see some examples:
For this example I’ve used these options:
$outline: true;$tags: (h1, h2, h3, button);
$attrs: (style);
$classes: (tags, streamItem-card, avatar, postMetaInline);
Another example using different options:
$outline: true;$tags: (section, article, p);
$attrs: (style);
As you can see this tool helps to find easyly the elements, attributes or classes that you want to debug.
By default the $outline is true, see below the difference between be true or false:
You can easyly change the options as you need.
Find this open source project and more details on github css-sass-debugger.
Thank you for reading! ❤
