Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Foldable TextMate CSS Groups (i.e. CSSEdit)

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #25032
    css-trickster
    Participant

    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

    #58670
    Chris Coyier
    Keymaster

    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]

    #58671
    Pieter
    Member

    Damn, Regex are everywhere!

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

    #75973
    davidcalhoun
    Member

    Very helpful. Thanks!

    #75313
    AjaxSerix
    Participant

    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" : "(?

    Hope this is helpful for the windows users.

    #87453
    kingjeffrey
    Member

    You can also use commented brackets like:

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

    No hacking the tmbundle files needed.

    #87458
    kingjeffrey
    Member

    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 { ...
    */
    #89465

    Or an even easier way:


    /** @group Group Name */

    css here {
    blah: blah;
    }

    /* @end **/

    For some reason the double *s make the section foldable

    #104224
    Mellowfellon
    Member

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

    #127681
    landitus
    Member

    @cnwtx: This plugin does the same for SublimeText 2:
    https://github.com/Kotrotsos/sublime-cssedit-groups

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Other’ is closed to new topics and replies.