Ignore SASS and LESS Partials (Starting with Underscore) when Using SublimeOnSaveBuild

by Josh | Posted in Tools & Efficiency | Tagged: , ,

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.

Recommended Books For Web Devs

CSS Secrets [Book Cover] Building out a design into HTML and CSS is like a series of small puzzles— some trickier than others. CSS Secrets: Better Solutions to Everyday Web Design Problems is a practical and modular look at many of the unique challenges you'll encounter during front-end development. Well-designed, and easy to pick up for any intermediate to advanced front-end dev looking to pick up some tips and tricks, and honing the processes used to figure them out.

Eloquent JavaScript [Book Cover] Eloquent JavaScript: A Modern Introduction to Programming is an engaging and well-formatted overview of JavaScript, complete with example projects and helpful diagrams. It's easy to read—not too dense, with readable type—and covers many subjects. The revised edition covers some of the newer features of JavaScript, including: class notation, arrow functions, iterators, async functions, template strings, and block scope.

The Phoenix Project [Book Cover] While The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win is a fictional novel, the slightly exaggerated characters and situations involved will be very familiar to anyone working in software development and IT. In it, an IT manager is confronted with the seemingly impossible task of turning around a project that's over-budget and past deadlines in 90 days, or else his department will be outsourced. The morals and takeaways from this story about DevOps and lean principles will stick with you.

Comments on this Article

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

    Reply
    • | Link
      Josh says:

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

      Reply
      • | Link
        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!

        Reply
  2. | Link
    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?

    Reply
  3. | Link
    Vladimir says:

    Hi Josh. Thanks for trick
    Maybe you you help w/ more nested structure?

    /app/sass/bootstrap/_alerts.scss
    /app/sass/bootstrap/mixins/_alerts.scss
    /app/sass/main.scss

    I can’t create regex to select partials in nested folders.
    Please, help and thanks in advance.

    Reply

Leave a Reply

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