Question

I have just made the switch from Espresso to Sublime Text 2 and cannot work out how to edit the closing brace location on CSS code blocks. I am very particular about coding style and prefer the following:

element {
    property: value;
    property: value;
    }

element {
    property: value;
    }

When an opening brace is invoked in Sublime Text 2, the closing brace appears directly after it with the cursor carat in between the 2 braces. I would like to set it so that the following takes place:

element {
    [carat-location]
    }

Properties can then be added within the braces. Once done, tab is keyed and the carat is moved to the following location:

element {
    property: value;
    }

[carat-location]

I have been able to set this in Espresso by editing the Sugar packages but I have not been able to track down where Sublime Text 2 adds these settings (if at all).

Answer 1

You can create a snippet. Tools/New Snippet...:

<snippet>
    <content><![CDATA[
{
    ${1}
    }

${2}
]]>
    </content>
</snippet>

Save it as Packages/User/CurlyBrackets.sublime-snippet.

Then, add a shortcut in your Key Bindings - User:

{ "keys": ["{"], "command": "insert_snippet", "args": {"name": "Packages/User/CurlyBrackets.sublime-snippet"}, 
    "context":
    [
        { "key": "selector", "operator": "equal", "operand": "source.css" }
    ]
}

This way, when you’ll press {, in css files, you’ll have what you asked for.