New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slow CSS compilation after migrating from 3.1.20 to 3.2.1 #495

Closed
chalofa opened this Issue Aug 17, 2012 · 22 comments

Comments

Projects
None yet
@chalofa

chalofa commented Aug 17, 2012

After I updated the sass dependency from 3.1.20 to 3.2.1, I have been noticing a slow recompilation of my CSS files.

With 3.1.20, changing any SASS file and recompiling took about 5 seconds.

Now, with 3.2.1, the same operation takes about 25 seconds.

The only warning I can find, is about extending a missing class, because I'm currently using a @extend .modal (a Twitter Bootstrap class).
Maybe it's trying to find that class and that's causing the slowness?

Other important gems used:

rails, 3.2.8
sass-rails, 3.2.5
bootstrap-sass, 2.0.4.0
@nex3

This comment has been minimized.

Contributor

nex3 commented Aug 20, 2012

It's not possible to help you with this without more information. Please provide a stylesheet that demonstrates this slowness; preferably one that's as small as possible and has no external dependencies.

@GBH

This comment has been minimized.

GBH commented Sep 13, 2012

I can confirm this. In 3.2 and 3.3 alpha compiling took about 18s. Downgrading to 3.1.21 reduced it to 2.5 seconds.

I'm also abusing bootstrap and @extend

@nex3

This comment has been minimized.

Contributor

nex3 commented Sep 14, 2012

@GBH Similarly to the above, without a stylesheet that I can compile to see the slowness myself, I can't do anything about it.

@dgdavid

This comment has been minimized.

dgdavid commented Oct 27, 2012

I have the same problem, and only in version 3.2.1 of Sass. I uploaded a simple example of application [https://github.com/dgdavid/slow-sass] with part of assets that I'm using. Every little change in styles involve a considerable time.

From the command line, the times are

sass --compass app/assets/stylesheets/application.css.scss > /dev/null  131,81s user 0,06s system 99% cpu 2:12,21 total

ruby -S sass _3.1.21_ --compass app/assets/stylesheets/application.css.scss >  6,33s user 0,07s system 99% cpu 6,417 total
@GBH

This comment has been minimized.

GBH commented Oct 27, 2012

@dgdavid I see you also use @extend to bring in bootstrap definitions instead of polluting your html with ridiculous classes like table.table.table-striped.table-bordered.table-hover.table-condensed.table-shutthefuckup. I like bootstrap in theory, but I really dislike how I'm forced to use it. @extend looked like a decent solution, but it doesn't scale (massive definitions if you have a lot of css) and incredibly slow even with version of sass that didn't make it several magnitudes slower.

@nex3

This comment has been minimized.

Contributor

nex3 commented Nov 3, 2012

@dgdavid Thanks for posting that repo. That'll definitely help me track down this issue.

@nex3

This comment has been minimized.

Contributor

nex3 commented Nov 3, 2012

git bisect indicates that 8f4869e introduced the issue.

@nex3

This comment has been minimized.

Contributor

nex3 commented Nov 3, 2012

It's worth noting that part of the reason this is so slow is that you're using @extend with very deeply nested selectors. @extend does a lot more work and produces a lot more output for each additional level of nesting. If you flattened out your stylesheet more, it would be faster and produce much less output.

That's not to say that I won't try to make this optimization faster, of course.

@dgdavid

This comment has been minimized.

dgdavid commented Nov 3, 2012

True, but the difference between one and another version is quite noticeable. However I have done some testing «un-nesting» as I much as possible and still is very slow in sass 3.2

Thanks for checking.

nex3 added a commit that referenced this issue Nov 10, 2012

@nex3

This comment has been minimized.

Contributor

nex3 commented Nov 10, 2012

That commit should mitigate the issue until I can fix it entirely. The downside is that deeply nested @extends now won't get thoroughly optimized.

@tsemana

This comment has been minimized.

tsemana commented Dec 13, 2012

Even with the fix my compile time is still around 104sec. when we say 'unnest' the extends, does that mean don't nest them in the .scss file? or the css structure?

isn't

#services{
  @extend .row;

  .service{
    @extend .four;
    @extend .columns;
  }
}

the same as

#services{
  @extend .row;
}

#services .service{
  @extend .four;
  @extend .columns;
}

I've tried the second format, and it still seems very long.

@nex3

This comment has been minimized.

Contributor

nex3 commented Dec 22, 2012

I mean the CSS structure. When you have @extends in selectors like form div.text_position .nested-fields .control-group-row input[type=text], Sass has to do a lot of work to get rid of extra selectors that are generated. That could probably be shortened to .control-group-row input[type=text] and work just fine.

@killthekitten

This comment has been minimized.

killthekitten commented Feb 22, 2013

How is the progress?

@nex3

This comment has been minimized.

Contributor

nex3 commented Feb 26, 2013

I haven't made any more progress since adding the workaround in 0ba3109.

@scamden

This comment has been minimized.

scamden commented Jul 21, 2013

what's the status here? comparing 3.2.7 to 3.1 my compile goes from ~38s to ~13s. i need the features in 3.2 but twice the compile time is rough..

@kamilski81

This comment has been minimized.

kamilski81 commented Jul 22, 2013

I use RubyMine and I this slow sass compilation was occurring when i was in 'debug' mode but would go away if i just started the server in 'run' mode, that may help some of you.

@scamden

This comment has been minimized.

scamden commented Jul 22, 2013

I cut out like 70% of my slowness by only importing the compass modules I needed. Sorry for raising the alarm

Sent from Mailbox for iPhone

On Sun, Jul 21, 2013 at 7:02 PM, kamilski81 notifications@github.com
wrote:

I use RubyMine and I this slow sass compilation was occurring when i was in 'debug' mode but would go away if i just started the server in 'run' mode, that may help some of you.

Reply to this email directly or view it on GitHub:
#495 (comment)

@rafael-h-ferreira

This comment has been minimized.

rafael-h-ferreira commented Aug 27, 2013

Same here. I have to use this code to make the spans work:

@for $i from 1 through 12
    .span#{$i}
        @extend [class^="span"] !optional
        @extend [class*="span"] !optional

After this and adding bootstrap-responsive, that uses 3 media queries, it gets too slow to work.

@unyo

This comment has been minimized.

unyo commented Oct 7, 2014

Is there a possibility of adding a flag to skip this reduction check? Compile times go from 12s to 3s when downgrading from 3.4.5/3.2.0 to 3.1.21.

I've even tried forking the repository and completely removing the trim functionality by taking the line in 0ba3109 and removing the if statement at the end, but it doesn't seem to cause the compile time to drop back down to anywhere near the 3s mark.

@nex3

This comment has been minimized.

Contributor

nex3 commented Oct 17, 2014

@unyo Can you provide the stylesheets that are compiling slowly for you?

@Cristialt

This comment has been minimized.

Cristialt commented Nov 12, 2014

Very slow here too, ~10s for a compilation, I think since I am using the newest sass versions

I am using a mb pro quad i7 2.3 with 8gb ram
ruby 1.9.3
sass 3.4.7
compass 1.0.1

I build from
+foundation 5.4.7
+font-awesome
+normalize
+my components

(I've had much better times with older sass, slower machine and bigger apps)

@nex3

This comment has been minimized.

Contributor

nex3 commented Aug 28, 2015

I'm going to merge this into #1019.

@nex3 nex3 closed this Aug 28, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment