17

Exactly as the title says. Compilation times over 50 seconds are unacceptable. So, is there a way, let's say: a single (partial) file with compass magic (like sprite mixins, etc.), and the rest of files with pure sass?

I'm considering moving to less (reference importing), and substituting all compass tricks with additional grunt tasks, but I'm more comfortable around sass than less.

I saw those tickets, but I hoped there would be a way to compile a single file with compass, and the rest to be merged with libsass (I sometimes use sass 3.3 syntax, but if I can gain better compile times I can revert to 3.2).

Did anyone succeed in such configuration?

Misiur
  • 5,019
  • 8
  • 38
  • 54

2 Answers2

36

In our case (>100.000 LoCSS), we succesfully moved from grunt-contrib-compass to a combination of

grunt-sass

which is using libsass instead of the ruby version, and to get all the magic from compass, we included

compass-mixins

and it worked just fine. You should definitely try it out, we reduced our compilation time from more than 40sec down to just 500-600ms.

UPDATE 2

Here's a node module that automagically imports the lib mentioned above into your grunt enviroment:

https://github.com/haithembelhaj/compass-importer

UPDATE

Creating a port to libsass is clearly on the creators mind: https://github.com/Compass/compass/issues/1916

stffndtz
  • 523
  • 4
  • 6
  • Yup, that's the direction I'm heading. Though things like sprite generation have [to be replaced with other tools](https://github.com/guardian/frontend/tree/master/tools/sprites) – Misiur Oct 31 '14 at 16:35
  • 1
    Absolutely blew my mind when this worked for me, with literally no changes other than removing compass and getting 5 seconds back in terms of compile-time. – cnp Jan 28 '15 at 03:15
  • 11
    Upvote for the poor soul who has to maintain 100k lines with 40 seconds of compilation. – Sam Becker Feb 09 '15 at 12:01
  • Just made the front-end devs day with this one. Removed `grunt-contrib-compass` & installed `grunt-sass` and `compass-importer`. Didn't even need to change a single line in my scss. – GFoley83 Oct 13 '15 at 22:32
1

This is answer for sass files (not scss). Please always differentiate them

  1. Run in shell bower install compass-sass-mixins
  2. Edit your sass file @import "bower_components/compass-sass-mixins/lib/compass"

or

  1. Run in shell npm i compass-sass-mixins
  2. Edit your sass file @import "node_modules/compass-sass-mixins/lib/compass"

List of functions: https://github.com/askucher/compass-sass-mixins

Andrey Stehno
  • 356
  • 1
  • 5
  • 9