I recently started using SASS for my CSS development (thanks to Deepak). SASS is a meta-language that makes developing CSS really easy - provided you master the syntax. There is a very good textmate bundle which makes it really simple to use on a mac. I will write more about how it has proven useful, but this post is to resolve a problem of developing CSS with SASS.

SASS identifies child selectors using indentation. For example:

	#parent
		:font-weight bold
		
		#child
			:font-weight normal				

would translate into CSS as:

	#parent { font-weight:bold; }
	#parent #child { font-weight:normal;}

When I have about 10 child (or sub-child) elements within each parent, tracking down the parent can become tricky. This is where folding CSS groups come in handy:

How did I do it?

First, I found this post on creating foldable CSS groups in textmate

Here are the steps:

• Go to Bundles>Bundle Editor>Edit Languages.
• Select the SASS > SASS file on the left column.
• Now you should see the language grammar file for SASS, starting with the line “{ scopeName = “source.css””
  find the line “foldingStartMarker = ” (line 4)
• Edit it to:
  
  

   foldingStartMarker = '// START |^#|^\*|^\b|^\.';
  		

  
  
• Edit the foldingEndMarker to:
  
  

   foldingStopMarker = '// END |^#|^\*|^\b|^\.';
  		

  
  

Tada! Your folding groups are ready! But it is not easy to type in “// START” and “// END” every time. So, you can create a snippet to automate it for you:

• Go to Bundles>Bundle Editor>Edit Snippets…
• Select SASS in the left column and click on the “+” icon at the bottom of the left column. Name it as you like.
• Put this snippet on the right column with the snippet name, you created in the previous step, selected.
  
  

  	// START ${1:name}
  	${0:$TM_SELECTED_TEXT}
  	// END ${1:name}			
  		

  
  
• Finally, assign a shortcut (Activation Trigger) that you can type and press tab so that you get access to the above (I used the characters “fld”).

I have created an issue to add this to the sass-textmate-bundle on Github. Please vote for it, if you would like to see this feature in the bundle.

Thanks to Chris Eppstein for nudging me to blog about it!