CSS Auto Commenting

by sc8696 ST2

Sublime plugin for auto commenting of CSS

Details

Version 2014.02.26.19.04.29
Homepage github.com
Issues github.com
Modified 11 years ago
Last Seen 45 minutes ago
First Seen 11 years ago

Installs

Total 3K
Win 2K
Mac 624
Linux 224

	Nov 21	Nov 20	Nov 19	Nov 18	Nov 17	Nov 16	Nov 15	Nov 14	Nov 13	Nov 12	Nov 11	Nov 10	Nov 9	Nov 8	Nov 7	Nov 6	Nov 5	Nov 4	Nov 3	Nov 2	Nov 1	Oct 31	Oct 30	Oct 29	Oct 28	Oct 27	Oct 26	Oct 25	Oct 24	Oct 23	Oct 22	Oct 21	Oct 20	Oct 19	Oct 18	Oct 17	Oct 16	Oct 15	Oct 14	Oct 13	Oct 12	Oct 11	Oct 10	Oct 9	Oct 8
Windows	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Mac	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0

Readme

Source: raw.githubusercontent.com

Sublime Automatic CSS comments

Using automatic styleguide generation like DSS or KSS is all well and good, but typing those comments is a pain!

This sublime plugin will try and figure out all that stuff for you and comment whatever CSS blocks you want.

How?

Just type /// followed by tab directly above the CSS section you want commenting and boom! Done.
It will also check the rest of your CSS/SCSS/LESS file for related states or attributes and add them as states in the comments too, plus it will give a guess at a suggested markup.

Install

Package Manager

Press Ctrl + Shift + P (Cmd + Shift + P on OSX) and search “install”
Then Search for ‘CSS Auto Commenting’ in the Sublime package manager and select it

Manual

Just download this repositry and dump the folder in the Sublime Packages folder

Example

Say you have some masterful CSS like this

button{
  background: #006dcc;
  font-size: 18px;
  color: #eee;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  padding: 10px;
  box-shadow: -3px -21px 21px -9px rgba(0,0,0,0.4) inset;
}
button.active{
  background: maroon;
}

button:disabled{
  background: #aaa;
  color: #777;
}

Just do this

///[tab]
button{
  background: #006dcc;
  font-size: 18px;
  color: #eee;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  padding: 10px;
  box-shadow: -3px -21px 21px -9px rgba(0,0,0,0.4) inset;
}
button.active{
  background: maroon;
}

button:disabled{
  background: #aaa;
  color: #777;
}

And magically!

/**
  * @name Button
  * @description Style for the button element
  * @state .active - active state
  * @state :disabled - disabled state
  * @markup
  *   <button>markup</button>
  */

button{
  background: #006dcc;
  font-size: 18px;
  color: #eee;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  padding: 10px;
  box-shadow: -3px -21px 21px -9px rgba(0,0,0,0.4) inset;
}
button.active{
  background: maroon;
}

button:disabled{
  background: #aaa;
  color: #777;
}

Woo!

Now you can spend less time commenting your stylesheets and more time… writing your stylesheets.

It will also work with nested SCSS/LESS structures

/**
  * @name Button
  * @description Style for the button element
  * @state .active - active state
  * @state :disabled - disabled state
  * @markup
  *   <button>Markup</button>
  */

button{
  background: #006dcc;
  font-size: 18px;
  color: #eee;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  padding: 10px;
  box-shadow: -3px -21px 21px -9px rgba(0,0,0,0.4) inset;

  &.active{
    background: maroon;
  }

  &:disabled{
    background: #aaa;
    color: #777;
  }
}

And then run your DSS builder and out pops some pretty, effortless styleguides!

e.g.