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).
This is awesome and was literarily just frustrating over this problem yesterday. However, since WordPress is the most popular CMS and what the majority of your readers are using, the WordPress final CSS file that would be compressed is “style.css” in the main theme folder (required for theme data to show properly) which is made from all the less files in a “less” folder.
Since we can’t of course exclude the whole theme folder, we would need to exclude just that particular style.css file. Could you update the post to include how to exclude a particular file?
Oh found a link to the documentation that shows how to do it: http://www.sublimetext.com/docs/2/projects.html.
Sublime never ceases to amaze me.
My structure for WordPress is usually
And then style.css:
Hey Chris,
There is no need to have that additional HTTP request for wordpress.
Simply use a loud comment in sass.
/*! This will not be removed, so you can put your theme contents in there*/
I blogged a bit more about that here:
http://jamesnowland.com/notes/wordpress-themes-in-sass-scss/
Yeah totally, that’s what I’m doing now. I also just had Compass start watching one folder level higher so I was able to use it at the theme folder level.
I advice using a “dot” as path. That way you can just copy the project file to a new folder when starting a new project. I use this quite a while.
sidenote: tabs aren’t indented correctly in these code blocks. And ” seems to be converted “ in JSON declarations, which breaks up valid code? at least in the comment-preview.
Ah seems to be the comment-preview has some issues, the actual post looks good.
I downloaded Sublime Text 2 after getting sooo frustrated with Coda 2. It appears to be awesome, and there are a ton of features I love. But I miss the direct FTP / publishing ability that Coda has. I appreciate this might not be the right forum for this question – but does anyone have any advice / or point me to plugins that can help with publishing my files to web servers with Sublime Text 2? Many thanks!
There are packages that publish to FTP for ST2 I’m nearly certain. However I’d highly recommend version control and deploying from that instead of direct FTP. See: https://css-tricks.com/video-screencasts/109-getting-off-ftp-and-onto-git-deployment-with-beanstalk/
Totally agree with Chris on using version control. However if you’re still looking for a FTP plugin, this one works nicely.
http://wbond.net/sublime_packages/sftp
Thanks Chris / Ciriac. I do use GIT for an ongoing project where I’m part of a larger team … and it’s great. I’ve yet to integrate it with my typical day to day projects where I’m not part of a team, and am working with simpler WordPress or HTML based websites. But, yes, okay … thanks for the video link Chris, I’ll check it out.
I do always work locally and then publish remotely – so I’m only ever working with local files … but the whole version control thing. Okay … I promise to give it a proper go! Thanks again.
Check out webbynode, they are a cloud host that also has GIT integration.
Sublime Text 2 is awesome, and this will save me some time and possibly make me happier. Thank you
Thanks for the tip,
I also love Sublime Text 2.
Adding a bit of information.
In my case, I compile the css in the same folder of the scss files. So I changed the line:
“folder_exclude_patterns”: [“css”]
to:
“file_exclude_patterns”: [“style.css”]
and worked for me.
Great tip Chris. It’s also pretty handy to exclude framework files you’re not going to touch.
Btw you forgot a “not” in the opening sentence “If you’re using Sublime Text 2” .
Cheers
A bit off but as long as we talking about projects in ST2 , check out Bit101`s plugin, for making custom project templates with dynamic assets:
https://github.com/bit101/STProjectMaker
So I totally get why you might want to do this, but before you follow suit here’s something you should really think about:
If you’re using a CSS preprocessor, you really ought to get into the habit of regularly looking at the compiled CSS that your SASS/LESS/whatever is outputting, in order to check that it’s sane.
It’s way too easy, especially when you’re starting out with preprocessors, to end up generating seriously non-optimal CSS. The classic would be over using nesting, but apparently harmless things like @extending classes that also contain @extends themselves can quickly lead to bloated rules that aren’t actually needed.
Preprocessors are awesome, but with great power comes great responsibility. The compiled CSS is what’s actually delivered to the browser, therefore it’s part of our jobs as a developer to ensure that it’s fit for purpose (ie as lean as possible).
Also, if you’re outputting super-compressed, production-ready compiled CSS in development, you’re gonna have a heck of a time debugging it. Better by far to go with the verbose, line-number-comment laden output for development, then compress/re-compile automatically as part of your build/deploy process.
You do, however, almost certainly want to ignore your sass-cache/ directory, and the .scssc files within it, as these really are annoying when you’re searching in ST2.
Hi Chris, thanks for this. I noticed your screenshot has chrome like tabs. Do you know what app allows this as I’m forever switching windows!
thanks a lot!
most of your website posts and tips are really tricky and of course , charming!
I do the same myself but I do wish they added a way to exclude folders but only from searches. I do actually sometimes want to dig into the compiled CSS/JS and having to leave Sublime to do it is a bit of a pain.
Wow, awesome. Now I don’t have to distinguish them from my .less files. Thanks!
Another way also useful found here:
"file_exclude_patterns": ["*.min.js", "*.min.css", ....
http://www.laurencegellert.com/2012/09/sublime-2-tip-excluding-minified-project-files/
I think there is a specific property to assign for excluding files from a project or project search
“file_exclude_patterns”:[“css”]
You can find more here
Awesome ! Exactly what i was looking for