Sublime Forum

Zen Coding css properties with no spaces

#1

Is it possible to expand Zen Coding css properties with no spaces after colon?

By default:

.some-class { position: absolute; }
Necessary:

.some-class { position:absolute; }

0 Likes

#2

I’m almost sure that zen coding doesn’t use spaces after colons by default. I had to edit my zen coding plugin to add the spaces after them, as that’s what i prefer.

0 Likes

#3

It’s very strange, because I have latest version of Sublime Text 2 and just two days ago I’d installed Zen Coding with Sublime Package Control. And this Zen Coding plugin really inserts spaces after colon in css properties.

Say me please, where and how you’d edited Zen Coding plugin, maybe I can delete space inserting in a same way like you’d added spaces.

0 Likes

#4

Is it Zen Coding plugin or ST2 itself that is adding a space?

0 Likes

#5

It’s definitely Zen Coding plugin, because it’s abbreviations of this plugin. Or am I wrong? Then if ST2 may do that, how I can switch off this setting? Or is it impossible?

0 Likes

#6

I’ve also been experiencing this problem. I think it started after the last Sublime update.

It seems like sublime or something within zen coding is adding a space before placeholders.

For example, c and tab results in:

color: # 000000

With ’ 000000’ being selected. Note the space between the # and the hex code.

0 Likes

#7

Has anyone been able to accomplish removing the whitespace between css properties and values? With or without Zen Coding/Hayaku?

It seems a very basic thing to control but I’ve been unable to find a solution in layman’s terms.

Edit: Found a solution:

[quote]Open ~/Library/Application Support/Sublime Text 2/Packages/CSS/css_completions.py in Sublime.

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.[/quote]

Source

Exactly what I was looking for, but as they say, it will be overwritten with any updates.

0 Likes

#8

Not to bring up an old issue, but does anyone have a solution for removing the extra blank space after all CSS styles in Sublime Text 3? The solution above does not work in Sublime Text 3. It’s such a small thing but it drives me crazy.

Thanks!

0 Likes

#9

Yes, very simple. I assume everyone’s using Emmet by now.

Add this:

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

Inside of your Emmet user settings file. That will only insert the colon instead of colon and space.

0 Likes

#10

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