Skip to content
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

Problem with repeated selectors in output. #1038

Closed
kfalkiewicz opened this issue Dec 9, 2013 · 6 comments
Closed

Problem with repeated selectors in output. #1038

kfalkiewicz opened this issue Dec 9, 2013 · 6 comments

Comments

@kfalkiewicz
Copy link

Hi
Few days ago I found this interesting issue in sass - pre, and in stable version.
When I tried to change margin on few elements already styled I found that Sass compiles this rule:

article > header + .element,
article > header + .element + .element,
article > header + .element2,
article > header + .element2 + .element2 {
  margin-top: 10px;
}

to this:

article > header + .element,
article > header + .element + .element,
article > header + .element2,
article > header + .element,
article > header + .element2 + .element2,
article > header + .element + .element2,
article > header + .element2 + .element,
article > header + .element + .element {
  margin-top: 10px;
}

As you see, some selectors are repeated and some shouldn't even be created. Tried and repeated this thing on codepen.io also:
http://codepen.io/anon/pen/LFHcI

@lolmaus
Copy link

lolmaus commented Dec 9, 2013

That's how extends work in Sass. See http://blackfalcon.roughdraft.io/4693231 for explanations.

My rule of thumb: never extend real selectors, only extend silent selectors.

@kfalkiewicz
Copy link
Author

Ok thx, but why something like this happens when I do only this ?:
SCSS:

article > header + .element2,
article > header + .element2 + .element2 {
  margin-top: 10px;
}

CSS:

article > header + .element2,
article > header + .element,
article > header + .element2 + .element2,
article > header + .element + .element2,
article > header + .element2 + .element,
article > header + .element + .element {
  margin-top: 10px;
}
@lolmaus
Copy link

lolmaus commented Dec 9, 2013

It does not.

@kfalkiewicz
Copy link
Author

I mean, that when I extend .element2 class by .element class and write this selector it still create additional variations.

@lolmaus
Copy link

lolmaus commented Dec 9, 2013

I gave you a link to an article that explains why it works this way.

@kfalkiewicz
Copy link
Author

Ok so this isn't an error and I am only stupid :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants