How to remove extra space after a colon in CSS wit

Question

When auto-complete is triggered for a CSS style, Sublime by default adds a space after colon like so:

position: relative;

How do I remove this space?

Answer 1

If you are using the Emmet package, the following solution should work with Sublime Text 3 too:

Open: Sublime Text 3 > Package Setting > Emmet > Settings-User and paste

{
    "preferences": {
        "css.valueSeparator": ":",
    },
}

Answer 2

Solution for Sublime Text 3:

Installing Pacage control (if not already installed): Open a console ctrl + `

Insert:

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Press eneter, check console and restart the program.

Start Pacage control with combination Ctrl + Shift + P Select "Pacage control: Install Pacage", wait for new window Select PackageResourceViewer Select "PackageResourceViewer: Open Resource" Select CSS Select css_completions.py

change:

.append ((p, p + ":"))

on:

.append ((p, p + ":"))

If you have Emmet Pacage, you also need to do:

In the top menu Package Setting> Emmet> Settings-User and paste

{
    "Preferences": {
        "Css.valueSeparator": ":"
    }
}

Answer 3

Edit: I submitted a different solution below, but would like to leave this here in case ppl are interested in Emmet which still looks pretty neat.

I'd like to offer up a somewhat tested solution :P I got it to replace my :<space> with a :).

• Install the Emmet package for Sublime Text 2: https://github.com/sergeche/emmet-sublime (easiest way is via the Package Manager)

This seems like a pretty popular plugin. I would scan the feature set first though because it looks like it'll add a bunch of shortcuts you might not want.

• Check out the documentation on customization: http://docs.emmet.io/customization/preferences/
• Search the page for css.valueSeparator -- This is the field you want to change. It defaults to :<space> – There are instructions for editing the package's preferences here: http://docs.emmet.io/customization/

I think I might actually keep/try this package myself. I hope it gives you what you're looking for.

Edit: I found the emmet instructions somewhat vague. Specifically, in Sublime Text 2 go to:

Sublime Text 2 > Preferences > Package Settings > Emmet > Settings - User and enter your override preferences there in JSON format. Handily, you can cut and paste template code from Sublime Text 2 > Preferences > Package Settings > Emmet > Settings - Default (but leave that file alone as it'll be overwritten when the package is next updated).

Answer 4

Extra answer to add that if you're working in Sass or SCSS files, you'll need to edit the snippets one-by-one in ~/Library/Application Support/Sublime Text 2/Packages/Sass/Snippets to achieve this.

Answer 5

I did some more digging and would like to suggest an alternate solution.

1. Open ~/Library/Application Support/Sublime Text 2/Packages/CSS/css_completions.py in Sublime.

2. On line 190, remove the space after the colon:

   l.append((p, p + ": "))
   

The only caveat I can think of is that this might get overwritten when you update Sublime, but this seemed to work great without installing an extra package.