Exclude Compressed CSS from Sublime Text 2 Projects

If you’re using Sublime Text 2, you might have switch to it because it’s Find in Project is super fast and nice. And if you’re using Sublime Text 2, that means you’re working locally on files, meaning there is a good chance you’re using CSS preprocessors. If you’re using CSS preprocessors, you probably compile CSS into a compressed style (non-relevant whitespace stripped) because that’s best, speed wise, for live websites.

Now let’s say you use Find in Project to find a class definition (e.g. “.sidebar-poll”) that you need to edit. You’ll probably find the .scss file or .less file or whatever, but you’ll also find it in the compressed CSS, which is this giant one-line file and totally borks up your Find Results page.

We can’t blame Sublime Text 2 because 1) It’s finding what you told it to find and 2) They provide a way to fix this if you don’t want to see those Find results. To fix this:

1. Save your project

Open your project (drag folder of project onto Sublime Text 2 icon in dock). Then save it from the Project menu.

This is nice anyway, since you get a file (YOUR-PROJECT.sublime-project) that you can double-click to open it back to the state you left it in at any time.

2. Edit Project

Go to Project > Edit Project.

3. Add Exclude Pattern

Change the JSON to include the folder_exclude_patterns of the folder where you keep your compressed CSS (just the name of the folder will work fine):

{
  "folders":
  [
    {
      "path": "/Users/chriscoyier/GitHub/whatever/",
      "folder_exclude_patterns": ["css"]
    }
  ]
}

Now that folder won’t show up in the sidebar of your project. Huzzah! To remove files from search results, a setting like:

"binary_file_patterns": ["*.css", "*.log, *.min.js"],

Note

This is for excluding folders on a per-project basis. If you always want to exclude a particular folder, you can change this exact same setting in Sublime Text 2 > Preferences > Settings – Default (or User).