Adding sections with folding for CSS in TextMate
Wednesday, July 14, 2010
In CSS there is no concept of sections or nested blocks. But since CSS files usually become very long, you may want to fold groups of style definitions to get a better overview:
/* start foldme */
p { color: #000 }
/* end foldme */
Since this is not possible with the CSS bundle shiped with Textmate, I added this on myself:
I first added a snipped called section to the CSS bundle:
/* start ${1:section} */ $0 /* end $1 */It gets activated by the tab trigger sec. The scope selector is source.css.
I then modified the language definition and added |/\* start \w+ \*/ to the foldingStartMarker and |/\* end \w+ \*/ to the foldingStopMarker. They should look like this now:
foldingStartMarker = '/\*\*(?!\*)|\{\s*($|/\*(?!.*?\*/.*\S))|/\* start \w+ \*/'; foldingStopMarker = '(?<!\*)\*\*/|^\s*\}|/\* end \w+ \*/';
That’s all you need to do.
Comment
Alex TC on July 30, 2010 at 01:18:
Hello, i really like your blog design, can you tell me on what platform is based? and what's the theme name? I am in love with it. PS: your tea timer is excellent for timing lord of ultima building queue.Stefan on July 30, 2010 at 10:08:
The theme was originally based on a WP theme called `Trendy <http://benediktrb.de/?s=trendy>`_ but it seems that it no longer available. Technically this site is built with `Django <http://www.djangoproject.com/>`_ and some self developed apps.autodidakto on August 3, 2010 at 05:25:
Does textmate have this issue when using sass (which does have the concept of nesting)?Alexander on August 3, 2010 at 11:24:
The snipped part works well for me, but i do not get the folding part (2.) running. I changed the definition of the two vars in the css language but no arrows to fold in/out appears. Any idears?Stefan on August 3, 2010 at 14:32:
@autodidakto: I’m sorry, I have no idea. Haven’t used SASS yet. @Alexander: Could you please paste your ``foldingStartMarker`` and ``foldingStopMarker``?Alexander on August 4, 2010 at 10:57:
.. sourcecode:: python foldingStartMarker = '/\*\*(?!\*)|\{\s*($|/\*(?!.*?\*/.*\S))|/\* start \w+ \*/'; foldingStopMarker = '(?<!\*)\*\*/|^\s*\}|/\* end \w+ \*/';Stefan on August 5, 2010 at 08:48:
@Alexander: Your markers look right and sections like .. sourcecode:: css /* start foldme */ p {color: red;} /* end foldme */ should be foldable. PS: I’ve reformatted your first comment with a code-block and deleted your other comments.Tristan on August 6, 2010 at 10:25:
You may also use SCSSAlexander on August 9, 2010 at 08:44:
I found the problem: I have Zen CSS installed too, which has overwritten the folding markers.