Nesting :extend inside a media query

[reubeningber]

When using the extend functionality nested inside a media query less fails to extend the css that you call. The other styles including the .font-size-rems() works inside the query.

Code snippet below:

@media screen and (max-width: 800px) {
    .subscribe-options {
        li {
            margin: 10px 0;

            a:extend(.gotham-narrow-bold) {
                text-transform: uppercase;
                .font-size-rems(16);
            }
        }
    }
}

[calvinjuarez]

Can you clean up that snippet and explain where .gotham-narrow-bold is that you'd like to extend?

Also, is there a reason you have to extend from within the media query? Because if you're trying to get .subscribe-options li a to behave like .gotham-narrow-bold always, wouldn't your code be more readable and maintainable if you extended from outside the query? And if you only want that behavior up to 800px, extending won't even accomplish what you want.

Btw, .font-size-rems() works because it's a mixin, which is very different to an extend.

[reubeningber]

The item only displays at that screens size so thats why I nested everything for the element in media query.

.gotham-narrow-bold is extending font-family, font-style, and font-weight and its located in a typography.less file.

[seven-phases-max]

This is known limitation (extend is made to not leave current media query scope), see #1165, #1155 for related discussions (there're arguments both for and against this).

[calvinjuarez]

@reubeningber Okay, so if I'm getting it right, you're situation's something like this.

.font-family-style-weight {
  /* font stuff */
}
.gotham-narrow-bold {
  &:extend(.font-family-style-weight);
}
@media (min-width: 768px) {
  .subscribe-options li a {
    &:extend(.gotham-narrow-bold);
  }
}

As far as a solution, it seems to me you have two options.

Mixin Option

input

.font-family-style-weight {
    /* font stuff */
}
.gotham-narrow-bold {
    &:extend(.font-family-style-weight);
}
.gotham-narrow-bold-mixin() {
    .font-family-style-weight(); // mixin instead of extending
    .gotham-narrow-bold; // copies everything else declared in `.gotham-narrow-bold`
}

/* Implementation */
@media (min-width: 768px) {
    .subscribe-options li a {
        //&:extend(.gotham-narrow-bold);
        .gotham-narrow-bold-mixin(); // use mixin instead
    }
}

output

.font-family-style-weight,
.gotham-narrow-bold {
  /* font stuff */
}
/* Implementation */
@media (min-width: 768px) {
  .subscribe-options li a {
    /* font stuff */
  }
}

The alternative is to structure your stylesheet differently. There's nothing wrong with, for example, something like this:

Extend/Adjust CSS Option

input

.font-family-style-weight {
    /* font stuff */
}
.gotham-narrow-bold {
    &:extend(.font-family-style-weight);
}
.gotham-narrow-bold-mixin() {
    .font-family-style-weight(); // mixin instead of extending
    .gotham-narrow-bold; // copies everything else declared in `.gotham-narrow-bold`
}

/* Implementation */
.subscribe-options li a {
    &:extend(.gotham-narrow-bold);
    /* hidden somehow */
}
@media (min-width: 768px) {
    .subscribe-options li a {
        /* undo "hidden somehow" */
    }
}

output

.font-family-style-weight,
.gotham-narrow-bold,
.subscribe-options li a {
  /* font stuff */
}
/* Implementation */
.subscribe-options li a {
  /* hidden somehow */
}
@media (min-width: 768px) {
  .subscribe-options li a {
    /* undo "hidden somehow" */
  }
}

For discussion about the good and bad about the current behavior, you can check out the issues @seven-phases-max referenced. Hope that helps.

[seven-phases-max]

Closing as expected behaviour (http://lesscss.org/features/#extend-feature-scoping-extend-inside-media).

[matthew-dean]

According to the language design discussion on #1165, calling an extend from within a @media query should extend selectors outside of that media query.

E.g. (slightly modified) from that thread

#header .a { color: blue; }

@media only screen {
   .b:extend(.a all) { border-color: black; }
   .c:extend(.a all) { height: 1em; }
}

Should compile to:

#header .a { color: blue; }

@media only screen {
   #header .b, #header .c { color: blue; }
   .b { border-color: black; }
   .c { height: 1em; }
}

@seven-phases-max - I see from the documentation that it wasn't implemented that way, but I don't see anything from those threads as to why it was implemented differently. (So the documentation may not be "proof" of what should happen; it may be faithful documentation of a bug.) The consensus from #1165 was that external (outside a @media block) matching selectors should get copied from outside to within the @media block.

Not sure if this is too late to fix or what the implications might be, but it appears this was missed in the original implementation. I'll open unless there's a later issue that tracks / explains the discrepancy.

[seven-phases-max]

@matthew-dean OK, but we already have an open issue for this "new" feature: #2095.
(#2095 is looking more like feature request, while this one is just a "bug report" arisen by not-RTMing).

[matthew-dean]

@seven-phases-max Ah, ok. That's what I was looking for. Thanks, closing.