A Collection of CSS Snippets for Sublime Text 2

A Collection of CSS Snippets for Sublime Text 2

Download

I’m a huge fan of Sublime Text 2. Hopefully you are too, though if you haven’t heard of it I highly recom­mend check­ing it out. It is cur­rently in pub­lic beta, and awe­some fea­tures are being added reg­u­larly. Sublime Text 2 has been offi­cially released!

I have spent some time put­ting together a set of CSS snip­pets for Sublime Text, and thought I might share them. I have gone through and made them as simple as pos­sible to use. The major­ity of the snip­pets are triggered by typ­ing the first three let­ters of a prop­erty, and then hit­ting tab. Some snip­pets are a little more advanced, with tab loc­a­tions saved into them, but I’ll let you play with them for your­self rather than go into any more detail.

The snip­pets can be down­loaded here. Copy the folder into the Sublime Text pack­ages 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 show­ing the power of these snip­pets, and here is an over­view of what is included. Also, here is the GitHub repository.

Package Control

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

Update

The scope of the snip­pets has been expan­ded to also include LESS, Sass and Stylus files.

Tweet this

Comments

  3. Court Kizer

    Where are the set­tings? How does it get activ­ated? It’s so frus­trat­ing everytime some­body releases some­thing like this none explains how to access. it. I installed it, but I still can’t access it like in the video you pos­ted. How about telling us some of the shortcuts?

  4. Joshua Hibbert

    Instructions on how to use the snip­pets can be found in the readme file that is included (and also linked at the bot­tom of the above article).

  5. Court Kizer

    Joshua:

    Thanks, sorry it’s frus­trat­ing. My main prob­lem now is I can’t get it to work on any files that have exten­sions other than .css even if I set the syn­tax 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 act­ive on?

  6. Joshua Hibbert

    No wor­ries, I can under­stand your frus­tra­tion. Currently the snip­pets have their scope set to CSS files only. Removing the fol­low­ing line from each snip­pet will change that: source.css

  7. Court Kizer

    Joshua, I’m going to assume that this prob­lem arises with so many plu­gins because sub­lime text hasn’t handled exten­sions prop­erly. It should work by exten­sion & syn­tax. So if I set my syn­tax to css on a .less file caus­ing snip­pets to work.

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

    What’s the cor­rect way to add mul­tiple file types?

    1) source.css
    source.less

    2) source.css, source.less

  8. Court Kizer

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

    source.css to source.styl

    instantly the snip­pet no longer works in source.css, how­ever it STILL doesn’t work in source.style, even with restart­ing the app.

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

  9. Court Kizer

    I figured it out:

    source.css requires the full name of the syn­tax, not the file exten­sion. To tar­get 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 modi­fic­a­tions to the snip­pets already, includ­ing gradi­ents, mix-ins and such. I’ll share them back on git­hub shortly!

  11. Thejoker44

    I’m hav­ing no luck with these at all. I’ve installed into the dir­ect­ory as above, but am not get­ting any­thing.
    Is there some­thing that needs to be ‘ticked’ in ST2 to activ­ate them?
    There is no user friendly instruc­tions in the read me file, just a list of the snippets.

  12. Thejoker44

    And in typ­ical fash­ion, I’ve just figured it out!
    Please delete my com­ments, and thanks for the snippets!

  13. Mandy

    Not see­ing a pull-request from Court on Github re: their mix­ins and edits, did they ever get into the pack­age? Was plan­ning on using it with .sass and .styl myself so these changes would be useful.

  14. Josh

    Hi, Mandy. I never received a pull request regard­ing this, but here’s a way you can eas­ily make the changes on your local machine:

    1. Install the pack­age 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’ but­ton and then select ‘OK’ (this might take a few seconds to appear).
    9. Select ‘Save All’ from the File menu.
  15. Step

    OH FINALLY, thanks for an actual list to start with for snip­pets. I’ve sur­pris­ingly found very little in terms of a site of selec­tions of snippets.

  16. Josh

    I have updated the Github repos­it­ory so that the scope now also sup­ports LESS, Sass and Stylus files.

  17. Robby

    Hi Josh — first off thanks for this pack­age — its going to be great time saver if I can work out how to use it!

    Newbie Sublime per­son and I’ve installed the snip­pets and they show when I click Tools,Snippets but its the text short­code I cant get work­ing. You say in the readme;

    Type the snip­pet short­code and then press Tab to com­plete 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 learn­ing curve.

    Thanks.

  19. Josh

    Hey, Robby. Sorry about the con­fu­sion. You actu­ally just need to type ‘cen’, the under­scores are to do with the mark­down format I’ve writ­ten the README in.

    And happy hol­i­days to you too!

  20. Robby

    Doh! — Told you I was a newbie!

    Thanks Josh, appre­ci­ate your help.