Sublime Forum

CSS shorthand auto completion

#1

Hello,

I’m trying out Sublime text as an alternative to coda, I’m really loving the simple interface and split view.

However, one thing that is killing me is the auto suggestion and completion of CSS shorthand.

For example, I have:

div#dog{background: url(images/dog.png) no-repeat left red;}

This is difficult to explain, so bare with me.

In coda after I type “url” and put in the url to the image hit space then I get the next list of suggestions and completions, so I’d type “no” hit enter for no-repeat, “l” for left and “r” for red.

In sublime text after the first suggestion / auto completion is completed, in this example the url, after that no auto completion works. This is a deal breaker for me as I have to type every property.

Is there a fix to this?

Cheers,

Grant

0 Likes

#2

You can make (or download) snippets in order to tailor your needs for CSS.
The cool thing about snippets is that you can TAB through the parameters.

Let me give you an example. If you make a new CSS snippet:

Tools -> New Snippet…

You will see this:

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- <tabTrigger>hello</tabTrigger> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>

Now change the line that start with ‘Hello,’… to this:

background: ${1:color} ${2:url('${3:url}')} ${4:top} ${5:left} ${6:repeat}

Then uncomment the ‘tabTrigger’ line and put in something like ‘ba’.
Uncomment the ‘source’ line and set it to ‘source.css’.

Save the file and now when you type ‘ba’ and hit Tab, it will expand to a line like this:

background: color url('url') top left repeat

With ‘color’ selected. Now every time you press Tab, you will jump to the next item (so you can either set it, or delete it).

Hope this helps.

P.S. You can also download completion files for CSS I’m sure, which add things like this snippet to the autocomplete list while typing, which might be a bit more efficient.

0 Likes