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

@extend performance #12

thinkslate opened this Issue Oct 7, 2010 · 6 comments


None yet
6 participants

thinkslate commented Oct 7, 2010

Using @extend in SASS has resulted in massive selectors in CSS. One of my CSS selectors is 4000 characters long. Chrome has been crashing and I think it has to do this my use of @extend. Can you comment?


This comment has been minimized.


nex3 commented Oct 7, 2010

I'm not sure what sort of comment you're looking for. Yes, if you use @extend a lot on the same selector, that selector will expand a lot. I think @extend works in a reasonably predictable way and this is a reasonably predictable consequence. It's definitely unfortunate that browsers can't handle long selectors, but there's not really a great way to shorten them here. I suppose one suggestion I have is to avoid using @extend in nested selectors in areas where you have problems.

I'm closing this because it's not really a bug report or feature request. If you have concrete suggestions for improving the situation, feel free to re-open.


This comment has been minimized.

devn commented Oct 7, 2010

nex3: That's pretty much all I was looking for -- I appreciate the explanation. Mainly, I am not very familiar with how @extendis implemented and wanted to know if there might be something in the sauce that could predictably and unduly expand in the process of using them.

Thanks again,


This comment has been minimized.


chriseppstein commented Oct 9, 2010

defn, if you can please look at your output and tell use what selectors you think should not have been generated, then we can discuss why they are there and what can be done about it. Please send this information to the mailing list tho instead of using the bug tracker.


This comment has been minimized.

millermedeiros commented Nov 8, 2011

if the amount of selectors is too large they could be broken into multiple rules and just repeat all the attributes (like a mixin would do).


This comment has been minimized.

devn commented Nov 22, 2011

I realize this has been closed for some time now, but since there was a recent comment it caught my attention. I think it would have been helpful in retrospect to define some sort of reasonable threshold for max_selector_length_before_warning to let the user know about the gigantic selectors being produced as a result of misusing @extend. Food for thought.


This comment has been minimized.

AlanFoster commented Jun 17, 2015

Commenting on an old ticket; Has this matter been revisited?

As a suggestion, we could split larger selectors into smaller chunked blocks - each of which would contain the same style properties.


before -

.a, .b, .c, .d {
  background-color: red;

After, splitting into groups of two -

.a, .b {
  background-color: red;

.c, .d {
  background-color: red;

This issue was closed.

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