Skip to content
See article explanation on medium
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
LICENSE.txt
README.md
_debugger.scss
bower.json
demo1.gif
demo2.gif
outline.png

README.md

Sass debugger

This scss file provides a way to debug your project with a visual highlight style preview based in some options that you can customize.

Take a look at DEMO

How to install

Download this repo and import the file _debugger.scss

If you prefer using bower just install it bower install css-sass-debugger.

Basic examples

demo1

For this example I've used these options:

$outline: true;
$tags: (section, article, p);
$attrs: (style);

demo2

For this example I've used these options:

$tags: (h1, h2, h3, h4, a);
$attrs: (style);
$classes: (jumbotron, featurette);

How to use

In your sass file import the _debugger.scss if you have downloaded it or if you are using bower just import from bower_components/css-sass-debugger/_debugger.scss

@import 'debugger.scss'

OR

@import 'bower_components/css-sass-debugger/_debugger.scss'

Then you need add this line in your sass file to activate the debugger mixin:

body{
  @include debugger();
}

The options default are:

$outline: true;
$tags: (none);
$attrs: (style);
$classes: (none);

Where $outline is the outside element's border, $tags are the DOM element's tag, $attrs are the element's attributes like style, data-*, class, id, alt, etc... and the $classes are the element's class.

By default the $outline is true, see below the difference between be true or false: outline

If you want to change these options you can do it inside of _debugger.scss and modify them as you need.

Just this! Be creative and debug your project in the best way.

Todo

  • Bookmarklet or chrome extension
You can’t perform that action at this time.