pseudo classes + extend + selector subjects #481

Closed
chriseppstein opened this Issue Aug 11, 2012 · 6 comments

Comments

Projects
None yet
3 participants
Owner

chriseppstein commented Aug 11, 2012

The following scss:

%foo {
  color: red;
  background-color: gray;

}
%foo:hover {
   background-color: yellow;
}

.bar! .stuff { @extend %foo; }

compiles to:

.bar! .stuff {
  color: red;
  background-color: gray; }

.bar! .stuff:hover {
  background-color: yellow; }

but it should be:

.bar! .stuff {
  color: red;
  background-color: gray; }

.bar:hover! .stuff {
  background-color: yellow; }

What is the ! appended to .bat? Is that new syntax ?

Owner

chriseppstein commented Aug 12, 2012

In css4, ! Signals which selector component is the "subject" -- that is what gets styled. In sass, ! Also signals what is being extended.

Contributor

nex3 commented Aug 15, 2012

In sass, ! Also signals what is being extended.

This is incorrect. Sass doesn't assign any extra semantics to !. As such, the compilation seen here is expected.

nex3 closed this Aug 15, 2012

chriseppstein reopened this Aug 16, 2012

Owner

chriseppstein commented Aug 16, 2012

Reopening. Just because we're not doing it doesn't mean we aren't supposed to be.

Consider:

aside %part! ol {
  padding-left: 20px;
}

footer .segment! a { @extend %part; }

becomes:

aside footer .segment! a! ol,
footer .segment! aside a! ol {
  padding-left: 20px; }

Something here is very wrong. the generated selectors are invalid.

coming back to the original example:

.bar! .stuff { @extend %foo; }

this is saying "extend .bar as %foo when .bar contains .stuff" So the output I suggested above is 100% what we should be generating.

Contributor

nex3 commented Aug 20, 2012

Okay, I buy it. That does fit the semantics of @extend.

aside %part! ol {
  padding-left: 20px;
}

footer .segment! a { @extend %part; }

becomes:

aside footer .segment! a! ol,
footer .segment! aside a! ol {
  padding-left: 20px; }

This is a separate bug.

Contributor

nex3 commented Feb 20, 2014

This should be handled by fixing #1126.

nex3 closed this Feb 20, 2014

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