1

This question is about editing css files in Sublime Text 3, with use of autocompletion.

I want this:

.class { color: #FFF; text-align: center; text-decoration: underline }

to be this:

.class { color:#FFF; text-align:center; text-decoration:underline }

as I type, not post-processor plugins.

zalog
  • 683
  • 9
  • 21
  • 1
    It is `color` not `text-color`. You need to modify, or create, a completions file. (I always have the space myself.) – Andy G May 17 '14 at 12:45
  • Yes, it's color. I was thinking about `text-align` and `color` at the same time. So, you have a solution about this? – zalog May 17 '14 at 12:56
  • 1
    Investigate the use of completions, and completions-files, in Sublime Text. There isn't a simple 'one sentence' answer to this question, you need to research. Creating individual snippets is an alternative route. ST is not a *hold my hand* IDE, it can be highly customized but requires effort. – Andy G May 17 '14 at 13:08
  • Did you search for any insight into how to do this? What in the results you found fell short of what you need? – J0e3gan May 17 '14 at 15:50
  • Of course I searched. I found a lot of solutions on how to do this on Sublime Text 2, but not 3. On Sublime Text 3, .py files are compressed. – zalog May 17 '14 at 16:12

1 Answers1

3

First off, let me say that I'm against this for readability reasons - if you want to minify your CSS, there are plenty of tools available to do that within Sublime. That being said, there is a way to do it, but it requires some effort. First, make sure you have Package Control installed. Next, we'll need to extract a file from a .sublime-package file, so install the PackageResourceViewer plugin. To do that, once you have Package Control installed and have restarted Sublime, open the Command Palette with CtrlShiftP (⌘ShiftP on OS X) and type pci into the prompt to bring up the Package Control: Install Package option. Hit Enter, wait for the repositories to load, then type packresview to bring up the PackageResourceViewer option. Hit Enter again, and wait for it to install.

Next, open the Command Palette again, and type prv to bring up the PackageResourceViewer options, then select PackageResourceViewer: Open Resource. Scroll down to CSS, hit Enter, then scroll down to css_completions.py and hit Enter again to open it. You can ignore 99% of the file, just scroll down to line 190, which looks like this:

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

Just delete the space after the colon : like so:

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

save the file, and you should be all set. You may want to restart Sublime (and reopen all your CSS files) for the full changes to take effect.

MattDMo
  • 100,794
  • 21
  • 241
  • 231
  • Thanks, it's working! I understand your point. This is the way I'm writing code for years now - http://zalog.ro/css/layout.css I think it's a little strange to keep that space, but I'll think about it :) – zalog May 17 '14 at 16:05