Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

pseudo classes + extend + selector subjects #481

Closed
chriseppstein opened this Issue · 6 comments

3 participants

@chriseppstein

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; }
@Anahkiasen

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

@chriseppstein
@nex3
Owner

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 nex3 closed this
@chriseppstein chriseppstein reopened this
@chriseppstein

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.

@nex3
Owner

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.

@nex3
Owner

This should be handled by fixing #1126.

@nex3 nex3 closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.