A Collection of CSS Snippets for Sublime Text 2

A Collection of CSS Snippets for Sublime Text 2


This post will take 1 minute to read.

I’m a huge fan of Sublime Text 2. Hopefully you are too, though if you haven’t heard of it I highly recommend checking it out. It is currently in public beta, and awesome features are being added regularly. Sublime Text 2 has been officially released!

I have spent some time putting together a set of CSS snippets for Sublime Text, and thought I might share them. I have gone through and made them as simple as possible to use. The majority of the snippets are triggered by typing the first three letters of a property, and then hitting tab. Some snippets are a little more advanced, with tab locations saved into them, but I’ll let you play with them for yourself rather than go into any more detail.

The snippets can be downloaded here. Copy the folder into the Sublime Text packages folder.

On a Mac this can be found in:

Library > Application Support > Sublime Text 2 > Packages

For Windows, it can be found in:

C: > Users > {username} > AppData > Roaming > Sublime Text 2 > Packages.

Here is a video showing the power of these snippets, and here is an overview of what is included. Also, here is the GitHub repository.

Package Control

You can install these snippets while in Sublime Text using Package Control. Simply search for CSS Snippets when installing a new package.


The scope of the snippets has been expanded to also include LESS, Sass and Stylus files.

Tweet this


  1. Court Kizer

    Where are the settings? How does it get activated? It’s so frustrating everytime somebody releases something like this none explains how to access. it. I installed it, but I still can’t access it like in the video you posted. How about telling us some of the shortcuts?

  2. Joshua Hibbert

    Instructions on how to use the snippets can be found in the readme file that is included (and also linked at the bottom of the above article).

  3. Court Kizer


    Thanks, sorry it’s frustrating. My main problem now is I can’t get it to work on any files that have extensions other than .css even if I set the syntax to css. How can I make this work on my .less files? Is there a list in this that tells it what file types to be active on?

  4. Joshua Hibbert

    No worries, I can understand your frustration. Currently the snippets have their scope set to CSS files only. Removing the following line from each snippet will change that: source.css

  5. Court Kizer

    Joshua, I’m going to assume that this problem arises with so many plugins because sublime text hasn’t handled extensions properly. It should work by extension & syntax. So if I set my syntax to css on a .less file causing snippets to work.

    The first thing I tried was adding additional scopes for these file types source.less, source.styl but that didn’t work.

    What’s the correct way to add multiple file types?

    1) source.css

    2) source.css, source.less

  6. Court Kizer

    For example, I edited rgba.sublime-snippet. If I change

    source.css to source.styl

    instantly the snippet no longer works in source.css, however it STILL doesn’t work in source.style, even with restarting the app.

    Why can’t it work on any of these extensions? I figured out it was comma delimited.

  7. Court Kizer

    I figured it out:

    source.css requires the full name of the syntax, not the file extension. To target bob.styl, you need to use source.stylus. Just like you wouldn’t put source.py, but source.python.

    I’ve made a lot of modifications to the snippets already, including gradients, mix-ins and such. I’ll share them back on github shortly!

  8. Thejoker44

    I’m having no luck with these at all. I’ve installed into the directory as above, but am not getting anything.
    Is there something that needs to be ‘ticked’ in ST2 to activate them?
    There is no user friendly instructions in the read me file, just a list of the snippets.

  9. Thejoker44

    And in typical fashion, I’ve just figured it out!
    Please delete my comments, and thanks for the snippets!

  10. Mandy

    Not seeing a pull-request from Court on Github re: their mixins and edits, did they ever get into the package? Was planning on using it with .sass and .styl myself so these changes would be useful.

  11. Josh

    Hi, Mandy. I never received a pull request regarding this, but here’s a way you can easily make the changes on your local machine:

    1. Install the package using Package Control (or manually).
    2. In Sublime Text, in the Preferences menu, click ‘Browse Packages’.
    3. Find the ‘CSS Snippets’ folder and drag it into the Sublime Text side bar.
    4. Make sure that the CSS Snippets folder is the only one open in the side bar (and that no files are open) and then select ‘Find in Files’ from the Find menu.
    5. In the ‘Find’ input, type ‘source.css’.
    6. In the ‘Where’ input, type ‘<open folders>’.
    7. In the ‘Replace’ input, type ‘source.css, source.sass, source.stylus’.
    8. Click the ‘Replace’ button and then select ‘OK’ (this might take a few seconds to appear).
    9. Select ‘Save All’ from the File menu.
  12. Step

    OH FINALLY, thanks for an actual list to start with for snippets. I’ve surprisingly found very little in terms of a site of selections of snippets.

  13. Josh

    I have updated the Github repository so that the scope now also supports LESS, Sass and Stylus files.

  14. Robby

    Hi Josh – first off thanks for this package – its going to be great time saver if I can work out how to use it!

    Newbie Sublime person and I’ve installed the snippets and they show when I click Tools,Snippets but its the text shortcode I cant get working. You say in the readme;

    Type the snippet shortcode and then press Tab to complete the snippet.

    So for example for text align centre I would type;
    __cen__ (then the Tab key?)

    Basic stuff but still very much on the learning curve.


  15. Josh

    Hey, Robby. Sorry about the confusion. You actually just need to type ‘cen’, the underscores are to do with the markdown format I’ve written the README in.

    And happy holidays to you too!

  16. Robby

    Doh! – Told you I was a newbie!

    Thanks Josh, appreciate your help.