Question

I’m trying to figure out how to change Sublime Texts auto bracket rules for css.

I get this by default:

.class {
    #CURSOR
}

I would like to have this:

.class {
    #CURSOR}

Any ideas on how to accomplish this?

Answer 1

You can add this shortcut to your Key Bindings - User:

{ "keys": ["enter"], "command": "insert", "args": {"characters": "\n\t"}, "context":
    [
        { "key": "setting.auto_indent", "operator": "equal", "operand": true },
        { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
        { "key": "preceding_text", "operator": "regex_contains", "operand": "\\{$", "match_all": true },
        { "key": "following_text", "operator": "regex_contains", "operand": "^\\}", "match_all": true },
        { "key": "selector", "operator": "equal", "operand": "source.css" }
    ]
}

to modify enter key behaviour with css files.

Or you can use a Snippet. Tools/New Snippet...:

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

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

Then, add a shortcut in your Key Bindings - User to trigger it when pressing { in css files:

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