Would it be feasible to have middleman use LibSASS?

#1

Libsass is magnitudes faster than the ruby-based compass/sass processors. Is it possible to adapt middleman to use it?

Large projects result with 5-10 second delays before livereload changes taking place. Cutting this time could significantly improve the feedback loop. Is it feasible to replace compass/sass with libsass in middleman? How?

#2

I’m trying to move the sass part from middleman to a grunt task, and run both with grunt-middleman.
It’s not easy, but I’m moving step-by-step.

I’m current using grunt-contrib-sass (so still ruby-sass) and compass-mixins to remove the compass native dependency.

#3

Grunt-middleman seems to aim to run middleman server or middleman tasks via grunt vs the command line. I am not sure if this is applicable to replacing middleman’s sass compilation with libsass.

Would you consider sharing your project settings? I am not sure how to

  • disable the ruby-based compass watch
  • enable grunt-middleman processing sass/scss

How does middleman’s change watcher loop work? Are there separate loops for sass/non-sass files?

#4

So basically here they are my steps:

  • disable grunt sass compiler, adding to config.rb

    ignore “/*.sass"
    ignore "    /*.scss”

  • Setup a grunt task that runs grunt-middleman (to run middleman) + grunt-sass (libsass wrapper) that compiles .scss / .sass in the same css directory + watch that is listening for style changes. Now you have a grunt based dev environment.

  • Setup a grunt task for build that runs middleman build command (also ignoring sass files) + clean previous compiled css + compile again all sass files to css + autoprefixer + bless + copy those files to build folder.

I hope this can help you. Let me know here if you’re encountering problems.

#5

Has anyone found a solution for this? I love MM, but the delay to wait for the site to rebuild every time is too much (I’m using Foundation with tons of @import going on).

I’ve been working with a few node sites lately (which use libsass), and the same amount of Sass compiles instantly.

#6

I followed @Matteo’s instruction and they worked. I did not create a grunt task for middleman, just ran grunt-sass and middleman s from the command line.

However, LibSass was messing up the css so I eventually reverted to the painfully slow ruby.

With LibSass approaching maturity it would be very nice to have a setting or extension.

#7

thanks @andreimoment, I’ll give that a shot tomorrow (although I might try gulp instead)

#8

@javaporter, would you care to report your results and possibly share your setup? I am sure we’re not the only ones preferring 2 sec. render times to 10 sec. render times :slight_smile:

#9

I didn’t get very far, I might look again this weekend. There are some decent looking node.js static compilers out now, and they are quite fast. I’m still waffling on what to use. I’m familiar with MM, but I like node, so…

However, no one is close to the documentation Middleman has. Part of what I’m trying to do is use Contentful as a content manager, and the documentation behind that gem is pretty much non-existent.

If I do get anything working in gulp I’ll host a public repo and put it in here.

#10

Hey guys, if you are still interested in using Middleman 3 with libSass. I just wrote a blog post about it:

#11

I tried this, but:

bundle exec sass --v
=>  Sass 3.4.19 (Selective Steve)

And the bundle viz file includes both sass and sassc. How do you make/make sure middleman uses sassc and not sass?

Also, I use susy and breakpoint which seem to create dependencies for sass. Any ideas on how to approach this?

Here’ s my gemfile:

source 'https://rubygems.org'

# gem "middleman", "~> 3.4.0"

gem "middleman-core", "~> 3.4"
gem "middleman-sprockets", ">= 3.1.2"
gem "uglifier", "~> 2.5"
gem "execjs", "~> 2.0"
gem "sassc"

# Live-reloading plugin
gem "middleman-livereload", "~> 3.4.0"

# gem "sass" #, '3.4.9'
# gem "compass" # consider replacing with https://github.com/Igosuki/compass-mixins if using libsass

gem "slim"
gem "susy"
gem "breakpoint"

gem "middleman-smusher"
gem "middleman-autoprefixer"
gem "middleman-inliner",  :git => 'https://github.com/andreimoment/middleman-inliner', :branch => 'andreimoment-patch-1'
gem "middleman-minify-html"

gem "pry"

Here’s the Gemfile lock file if I only leave sassc:

GEM
  remote: https://rubygems.org/
  specs:
    ffi (1.9.10)
    ffi (1.9.10-x86-mingw32)
    sass (3.4.19)
    sassc (1.8.1)
      bundler
      ffi (~> 1.9.6)
      sass (>= 3.3.0)

PLATFORMS
  ruby
  x86-mingw32

DEPENDENCIES
  sassc
#12

I created this gem for Middleman 3 to achieve this.

1 Like
#13

Hi @andreimoment !

I just updated the blog post to address your concern. Also, the gem @vvasabi is referring to has some info on how to test it in the README file.

1 Like
#14

Thank you for getting to the bottom of this. Sassc import depending on sass is quite confusing.