Grow your CSS skills. Land your dream job.

Exclude Compressed CSS from Sublime Text 2 Projects

Published by Chris Coyier

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.


Yeah, I don't really need to see that.

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).

Comments

  1. 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?

  2. Jason
    Permalink to comment#

    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.

    {
    {
    	"folders":
    	[
    		{
    			"path": ".",
    			"folder_exclude_patterns": ["css"]
    		}
    	]
    }
    

    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.

    • Jason
      Permalink to comment#

      Ah seems to be the comment-preview has some issues, the actual post looks good.

  3. 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!

  4. Ozzy
    Permalink to comment#

    Sublime Text 2 is awesome, and this will save me some time and possibly make me happier. Thank you

  5. Subash Pathak
    Permalink to comment#

    Thanks for the tip,
    I also love Sublime Text 2.

  6. 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.

  7. yez
    Permalink to comment#

    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

  8. 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

  9. 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.

  10. Permalink to comment#

    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!

  11. aliweb
    Permalink to comment#

    thanks a lot!
    most of your website posts and tips are really tricky and of course , charming!

  12. 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.

  13. Permalink to comment#

    Wow, awesome. Now I don’t have to distinguish them from my .less files. Thanks!

  14. Permalink to comment#

    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/

  15. 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

  16. Vic

    Awesome ! Exactly what i was looking for

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".