quaertym / ember-cli-compass-compiler

Ember CLI Compass Compiler
MIT License
28 stars 23 forks source link

Is it supposed to be that slow? #70

Closed youroff closed 8 years ago

youroff commented 8 years ago

I'm trying to make compass and bootstrap work together and it seems like it takes >20 seconds to compile just plain bootstrap:

CompassCompiler (1)                           | 22575ms 

What would be normal compilation time?

Besides that, I observe errors that weren't there before (when I used ember-cli-sass):

    error app/styles/components/affix-panel.sass (Line 2: Undefined variable: "$screen-sm-max".)
    error app/styles/components/highlight.sass (Line 2: Undefined variable: "$brand-warning".)
...
    error app/styles/components/simple-sorter.sass (Line 3: Undefined variable: "$brand-primary".)
...
Compilation failed in 3 files.

Command failed: /bin/sh -c compass compile --import-path=bower_components/bootstrap-sass/assets/stylesheets --output-style=compressed --sass-dir=app/styles --css-dir="/Users/youroff/Documents/projects/autocloud/client/tmp/compass_compiler-output_path-2S225DUF.tmp/assets"

I tried to launch this command and it only shows > as if it was expecting some input. Compass version is 1.0.3.

UPD: Seems like it renders separate CSS files, is there some setting to tell it building one file? UPD2: Probably the key is here: Other .scss files in app/styles are compiled as well. What's the workflow for splitting styles into importable pieces then?

quaertym commented 8 years ago

Use a main file (eg app.scss) and import other files (eg _mixins.scss) using:

@import "mixins"

body {
  // ...
}
youroff commented 8 years ago

That is exactly what I'm doing. Except that I don't underscore them. Does underscore prevents file from being compiled separately?

My problem, as far as I see, is that variables and mixins from bootstrap (imported in app.sass before other files) are not accessible inside of "other files", when they are rendered in isolation.

UPD: Ok, I tried and underscore seemed to prevent files from compiling separately, so this problem is gone

But the performance issue is still there and now, when I was able to compile all parts of my project it took 33 seconds. If I leave only bootstrap import in app.sass, it takes 10 seconds to render, which would be bearable if it was rendered once. But seems like it re-renders the whole set if something changed in other files. What I'm trying to figure out is whether it's considered normal or there's a problem with compass, sass or some other package.

quaertym commented 8 years ago

I am aware that compilation is slow however I have no good solution for that for now. I hope someone with deeper knowledge of compass, sass cache and broccoli will tackle that and submit a PR.

youroff commented 8 years ago

Sorry, forgot to answer earlier. The problem as I discovered is that compass uses ruby sass, when ember-cli-sass relies on node-sass which uses libsass written in C. So it's much faster. Probably the only way to achieve the same speed of compilation is to try to keep using ember-cli-sass with only importing sass sources of Compass. Not sure if this approach allows for using of all the features of Compass, though.

quaertym commented 8 years ago

What you said should be doable with ember-cli-sass. This repo uses compass as the name suggests. If a faster compass solution becomes available, I will switch to that.