CODEWITHSUNDEEP
cssmacossublimetext2sublimetext
pixelfreak
pixelfreak

Reputation: 17844

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

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?

Upvotes: 9

Views: 3173

Answers (5)

user5940606
user5940606

Reputation:

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

Upvotes: -9

ZiyadG
ZiyadG

Reputation: 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": ":",
    },
}

Upvotes: 0

James Smith
James Smith

Reputation: 538

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.

Upvotes: 0

Tracy Fu
Tracy Fu

Reputation: 1662

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 :).

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.

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).

Upvotes: 2

Tracy Fu
Tracy Fu

Reputation: 1662

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.

Upvotes: 17

Related Questions