CSS Auto Commenting
Sublime plugin for auto commenting of CSS
Details
Installs
- Total 3K
- Win 2K
- Mac 624
- Linux 224
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 | Oct 7 | Oct 6 | Oct 5 | Oct 4 | Oct 3 | Oct 2 | Oct 1 | Sep 30 | Sep 29 | Sep 28 | Sep 27 | Sep 26 | Sep 25 | Sep 24 | Sep 23 | Sep 22 | Sep 21 | Sep 20 | Sep 19 | Sep 18 | Sep 17 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 folderExample
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.