Change Sublime Text Bracket/Indent Rules - css

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" }
]
}