Ignore partials sublime text SASS

I’ve recently started using SASS and LESS with Sublime Text. The most popular recommended extensions for SASS were “SASS” for highlighting, “SASS Build” for compiling, and “SublimeOnSaveBuild” to auto build whenever you save.

The problem with the build on save is that it currently does not ignore partials. Partials are additional files starting with an underscore that you import into your main SASS file,  e.g. _vars.scss or _typography_scss.

The settings for the package allows you to set a regular expression for the filename that is built. The only way that I could think to fix this is to modify this regular expression to exclude files starting with an underscore. To edit this file, go to Preferences -> Package Settings -> SublimeOnSaveBuild -> Settings – User. It’s best to edit the User preferences rather than the Default preferences, so they will be preserved after upgrading.

Package Settings

I’ve also tried this out on the regex tester pythex.org: View Regex Tester

Here’s a basic explanation of the regex in the filename_filter:

  • Matches backslash, forward slash, or is start of string
  • Does not then have an underscore
  • Matches any number of alphanumeric and underscores (w)
  • Matches period, and file extension, then end of string with $ (default)

Note that you need to do an extra escape on the forward slashes to get them to work in Sublime text, hence the \\ and \. There is an error in parsing without them.

There’s this relief and elation one feels when a tricky regex finally works. Phew. If this doesn’t work for you, let me know. I’m no regex master, so feel free to drop in any improvements. Hopefully this will be added to the package by default in the future.

Comments on this Article

  1. Grsmto says:

    The problem using sublime on save build is that you have to save twice : on the partial files and then, on the main scss file to get your partial changes compiled.

    • Josh says:

      This is true. I’d like to find a way around this, otherwise I may just use Compass in tandem.

      • Dave Luke says:

        Hey Josh, the solution to this problem is downloading a plug-in called “auto-save”. After you make the regex change you recommend above, when you go to your partials and make a change, they are automatically saved (but not build because of above). With the combination of the two, workflow is very easy!

  2. nick says:

    I can’t get this filter to work.

    I have my CSS in a folder, my _variables.scss in a Partials folder within my css folder.

    @import ‘partials/variables'; is compiling to my css.. so things are working properly, however saving _variables.scss still saves out a _variables.css into my partials folder which is un-necessary.

    Anyone able to help with this?

Leave a Reply

You can use the <pre> tag to post a block of code, or <code> to highlight code within text.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>