Divya Manian

RSS Feed Youtube Channel Github

Foldable CSS blocks in SASS with Textmate

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:

Folded CSS Group in action

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!

Comments