Sublime Forum

Remove blank space after CSS style

#1

I know this has been brought up before, but I don’t see an answer for Sublime Text 3. When you have a CSS file open and you write a style declaration you get something like so:

h2 {padding: 10px;}

Some Front-end developers (myself included) prefer our CSS declarations to not include the extra space after the colon, like this:

h2 {padding:10px;}

By default Sublime Text 3 adds a space after the colon. Does anyone know of a solution to modify this so it just creates the colon and leaves out the space? Any help would be much appreciated.

Thanks!

0 Likes

Not putting blank space after property in css
#2

I’m not too sure that ST adds that space. Do you have Emmet installaed?

If yes, then there is this setting:

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

0 Likes

#3

Thanks for the response. Yes, I do have Emmet installed and I have updated that preference. That does fix the issue with all the Emmet autocompletions, so thank you!

Do you know with a standard autocomplete like padding or margin that is not part of Emmet how to stop it from adding the space after the colon? Try typing “pad” and hitting tab in a CSS file and you’ll still get "padding: " with the space after the colon. Do you get the same results?

Thank you!

0 Likes

#4

I hate having space after my CSS colons as well.

Updating Sublime Text 3 is similar to the way it was done in Sublime Text 2 with the exception of having to extract the CSS.sublime-package before you can amend it.

I’m guessing you have Package Control? Please follow the steps below:

  1. Install “Extract Sublime Package” from Package Control and set extract_sublime_package_ask_on_open preference to true.
  2. Go to your Sublime Text 3 installation directory and then the Packages folder. On Windows it’s in: C:\Program Files\Sublime Text 3\Packages
  3. Open the CSS.sublime-package via Sublime Text 3, you should now get prompt to exctract it, click OK.
  4. Go to your Sublime Text 3 user directory, easiest is from ST3 menu: Preferences > Browse Packages
  5. Open “css_completions.py” inside the “CSS” folder (which is the extracted CSS package above)
  6. On line 190, there is this code: l.append((p, p + ": ")) … remove the space after the colon and save the file

… and you done! Happy CSSing without colon spaces. :sunglasses:

0 Likes

#5

[quote=“bcoyour”]…
Do you know with a standard autocomplete like padding or margin that is not part of Emmet how to stop it from adding the space after the colon? Try typing “pad” and hitting tab in a CSS file and you’ll still get "padding: " with the space after the colon. Do you get the same results?[/quote]

I do, but don’t type ‘pad’, just type ‘p’ and press Enter. You’ll get ‘padding:|;’ (The | is just to show you where the cursor would be :])

Not sure if you’ve seen this, but here’s Emmet’s Cheat Sheet: docs.emmet.io/cheat-sheet/

Since I like to have my CSS properties in a single line, I also have a setting that adds a space after my semicolons:

"css.propertyEnd": "; "

So my Emmet.sublime-settings file looks like this:

{ "preferences": { //Removes the space after the colon "css.valueSeparator": ":", //Adds a space after the semicolon "css.propertyEnd": "; " } }
Feel free to use the above code as you wish.

0 Likes