Sorry guys, this is an OSX TextMate only thing, although the concept can probably be applied elsewhere. TextMate is my editor of choice. However, because it is so versatile, it sometimes lacks language-specific features that an IDE might have. In MacRabbit's CSSEdit, for example, you can group CSS declarations with the syntax:
/* @ group GroupName */ css declarations /* @ end */
(no space between "@" and "group" or "end")
Although CSSEdit is a great program, I hate having to use multiple editors, so I wanted this ability in TextMate. I found a way to do it using TextMate's language grammars and code-folding: In TextMate, you can fold blocks of code, so it was simply a matter of convincing TextMate that everything between those two comments is foldable.
To do so:
Go to Bundles>Bundle Editor>Edit Languages...
Choose the CSS language. (It's in the CSS group with an L next to it)
Now you should see the language grammar file for CSS, starting with the line { scopeName = source.css
find the line foldingStartMarker = (line 4)
delete that line and put the following in its place:
All this is doing is adding /* @ group GroupName */ to the folding StartMarker regular expression and /* @ end */ to the foldingStopMarker regular expression. To change the syntax simply edit the regular expression.
Now, to make a foldable group, simply use the syntax above. Note: you don't have to supply a group name at all. I hope this is useful :D
I use e text editor on windows and was confronting the same issue. I used to use CSS Edit at a former job and really loved it having the collapsable groups in my css. Thanks so much for this. I was able to modify your above lines a bit and make this work for windows as well.
To make it work on windows go to the bundles editor under bundles->Edit Bundles->Show Bundles Editor
Then expand the css section and the language file is marked with an "L" icon all the way at the bottom.
A search for folding will find the affected lines above. The expression has to be changed. I compared the existing to the one above and did this
I will sometimes use the bracketed comments to fold at comment banners:
/* -------------------------------------------------------------- --- Group Name 1 { -------------------------------------------------------------- */
some css code
/* }------------------------------------------------------------- --- Group Name 2 { -------------------------------------------------------------- */
some more css code
/* -------------------------------------------------------------- }-- End of Stylesheet -------------------------------------------------------------- */
When collapsed, it reduces to a very accessible index for the code:
/* -------------------------------------------------------------- --- Group Name 1 { ... --- Group Name 2 { ... -------------------------------------------------------------- */
(no space between "@" and "group" or "end")
Although CSSEdit is a great program, I hate having to use multiple editors, so I wanted this ability in TextMate. I found a way to do it using TextMate's language grammars and code-folding:
In TextMate, you can fold blocks of code, so it was simply a matter of convincing TextMate that everything between those two comments is foldable.
To do so:
{ scopeName = source.cssfind the line
foldingStartMarker =(line 4)delete that line and put the following in its place:
do the same for the line "foldingStopMarker = " (line 5), replacing it with:
All this is doing is adding
/* @ group GroupName */to the folding StartMarker regular expression and/* @ end */to the foldingStopMarker regular expression. To change the syntax simply edit the regular expression.Now, to make a foldable group, simply use the syntax above. Note: you don't have to supply a group name at all. I hope this is useful :D
To show the difference, and explain visually the "folding" concept:
Before:
http://css-tricks.com/forum-pics/cant.jpg
After:
http://css-tricks.com/forum-pics/can.jpg
http://css-tricks.com/forum-pics/folded.jpg
For the Coda users who like this, vote: http://getsatisfaction.com/panic/topics ... collapsing
To make it work on windows go to the bundles editor under bundles->Edit Bundles->Show Bundles Editor
Then expand the css section and the language file is marked with an "L" icon all the way at the bottom.
A search for folding will find the affected lines above. The expression has to be changed. I compared the existing to the one above and did this
For the Start Marker line 289
For the End Marker line 287
Hope this is helpful for the windows users.
No hacking the tmbundle files needed.
When collapsed, it reduces to a very accessible index for the code:
For some reason the double *s make the section foldable
you can get this by just indenting your code. Like this->
or even like this if you don't care about compatibility with espresso.
That does lead to an unfortunate amount of additional indentation though..
@cnwtx: This plugin does the same for SublimeText 2: https://github.com/Kotrotsos/sublime-cssedit-groups