ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

CSS Auto Commenting

by sc8696 ST2

Sublime plugin for auto commenting of CSS

Details

  • 2014.02.26.19.04.29
  • github.​com
  • github.​com
  • 6 years ago
  • 42 minutes ago
  • 7 years ago

Installs

  • Total 3K
  • Win 2K
  • Mac 624
  • Linux 224
May 29 May 28 May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6 May 5 May 4 May 3 May 2 May 1 Apr 30 Apr 29 Apr 28 Apr 27 Apr 26 Apr 25 Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15
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.