- This topic is empty.
-
AuthorPosts
-
June 6, 2009 at 3:43 pm #25032css-tricksterParticipant
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:
foldingStartMarker = '/**(?!*)|{s*($|/*(?!.*?*/.*S))|/*s*@groups*.*s**/';
do the same for the line "foldingStopMarker = " (line 5), replacing it with:
foldingStopMarker = '(?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
June 7, 2009 at 11:41 am #58670Chris CoyierKeymasterVery nice!
To show the difference, and explain visually the "folding" concept:
Before:
[img]http://css-tricks.com/forum-pics/cant.jpg[/img]After:
[img]http://css-tricks.com/forum-pics/can.jpg[/img][img]http://css-tricks.com/forum-pics/folded.jpg[/img]
June 7, 2009 at 11:50 am #58671PieterMemberDamn, Regex are everywhere!
For the Coda users who like this, vote: http://getsatisfaction.com/panic/topics … collapsing
May 16, 2011 at 2:29 pm #75973davidcalhounMemberVery helpful. Thanks!
May 25, 2011 at 12:26 pm #75313AjaxSerixParticipantI 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
For the Start Marker line 289
"foldingStartMarker" : "/\*\*(?!\*)|\{\s*($|/\*(?!.*?\*/.*\S))|\/\*\s*@group\s*.*\s*\*\/",
For the End Marker line 287
"foldingStopMarker" : "(?
Hope this is helpful for the windows users.
September 17, 2011 at 2:06 pm #87453kingjeffreyMemberYou can also use commented brackets like:
/*
GroupName {
*/
css code
/*
}
*/
No hacking the tmbundle files needed.
September 17, 2011 at 2:25 pm #87458kingjeffreyMemberI 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 { ...
*/
October 28, 2011 at 10:01 pm #89465carlbennettnzMemberOr an even easier way:
/** @group Group Name */
css here {
blah: blah;
}
/* @end **/
For some reason the double *s make the section foldable
June 11, 2012 at 10:16 am #104224MellowfellonMember##Edit
you can get this by just indenting your code. Like this->
/* @group Fonts */
body {
background: rgb(232,232,232);
color: #7C7C7C;
font: 18px/26px "chaparral-pro", serif;
}
/* end */
or even like this if you don’t care about compatibility with espresso.
/* Look here's my simple css Fonts group */
body {
background: rgb(232,232,232);
color: #7C7C7C;
font: 18px/26px "chaparral-pro", serif;
}
/* ends here */
That does lead to an unfortunate amount of additional indentation though..
March 10, 2013 at 3:09 pm #127681landitusMember@cnwtx: This plugin does the same for SublimeText 2:
https://github.com/Kotrotsos/sublime-cssedit-groups -
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.