How to add space after a colon in CSS with Sublime Text 2?

Question

When working in CSS (or SCSS/SASS files) with Sublime Text 2, I'd like to automatically add a space after the colon. How can I do that?

What it currently does:

body {
   color:red;
}

What I want:

body {
   color: red;
}

Answer 1

Add this line:

{ "keys": [":"], "command": "insert", "args": {"characters": ": "}}

To your .config/sublime-text-2/Packages/User/Default (Linux).sublime-keymap (in menus: Preferences>Key bindings User) File. Now everytime you press :, :and a space will appear... :)