Grow your CSS skills. Land your dream job.

Foldable TextMate CSS Groups (i.e. CSSEdit)

  • # June 6, 2009 at 3:43 pm

    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 = '(?< !*)**/|^s*}|/*s*@ends**/';

    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

    Very 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

    Damn, Regex are everywhere!

    For the Coda users who like this, vote: http://getsatisfaction.com/panic/topics … collapsing

    # May 16, 2011 at 2:29 pm

    Very helpful. Thanks!

    # May 25, 2011 at 12:26 pm

    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

    For the Start Marker line 289

    "foldingStartMarker" : "/\*\*(?!\*)|\{\s*($|/\*(?!.*?\*/.*\S))|\/\*\s*@group\s*.*\s*\*\/", 

    For the End Marker line 287

    "foldingStopMarker" : "(?< !\*)\*\*/|^\s*\}|\/*\s*@end\s*\*\/",

    Hope this is helpful for the windows users.

    # September 17, 2011 at 2:06 pm

    You can also use commented brackets like:

    /*
    GroupName {
    */
    css code
    /*
    }
    */

    No hacking the tmbundle files needed.

    # September 17, 2011 at 2:25 pm

    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 { ...
    */
    # October 28, 2011 at 10:01 pm

    Or an even easier way:


    /** @group Group Name */

    css here {
    blah: blah;
    }

    /* @end **/

    For some reason the double *s make the section foldable

    # April 21, 2012 at 1:39 pm

    Does anyone know how to do this with Sublime Text 2?

    # June 11, 2012 at 10:16 am

    ##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

    @cnwtx: This plugin does the same for SublimeText 2:

    https://github.com/Kotrotsos/sublime-cssedit-groups

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".