项目作者: jotavejv

项目描述 :
See article explanation on medium
高级语言: CSS
项目地址: git://github.com/jotavejv/css-sass-debugger.git
创建时间: 2017-04-17T17:16:16Z
项目社区:https://github.com/jotavejv/css-sass-debugger

开源协议:Other

下载


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:

  1. $outline: true;
  2. $tags: (section, article, p);
  3. $attrs: (style);

demo2

For this example I’ve used these options:

  1. $tags: (h1, h2, h3, h4, a);
  2. $attrs: (style);
  3. $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

  1. @import 'debugger.scss'

OR

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

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

  1. body{
  2. @include debugger();
  3. }

The options default are:

  1. $outline: true;
  2. $tags: (none);
  3. $attrs: (style);
  4. $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