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

Using extend inside a ruleset argument for a mixin #2748

Closed
wjohnsto opened this issue Dec 3, 2015 · 5 comments
Closed

Using extend inside a ruleset argument for a mixin #2748

wjohnsto opened this issue Dec 3, 2015 · 5 comments

Comments

@wjohnsto
Copy link

wjohnsto commented Dec 3, 2015

I'm using LESS v2.5.3.

I am trying to extend an element rule inside a ruleset in a mixin as follows:

h1 {
    font-size: 3em;
}

.hero {
    & > .hero-title {
        font-size: 1.5em;

        .phablet({
            &:extend(h1);
        });
    }
}

The .phablet mixin is a mixin that does a min-width media query for phablets. Based on my limited knowledge from reading #1048 it seems like this should work (the font-size should be set to 3em on .phablets. The less compiles fine, but nothing is output, so the font-size remains at 1.5em. Am I doing something wrong?

EDIT: Note this is a somewhat contrived example. In my own code h1s have a bunch of media queries associated with them, and what I would like to do is use the .phablet mixin to reset .hero-title to use those media queries.

@SomMeri
Copy link
Member

SomMeri commented Dec 3, 2015

The :extend inside @media directive is scoped only to rulesets written inside that directive. E.g. this:

h1 { font-size: 3em; }
@media print {
    div-phablet {
      &:extend(h1);
    }
}

compiles into (live example):

h1 {
  font-size: 3em;
}

Example without media:

h1 {  font-size: 3em; }
div-phablet {
  &:extend(h1);
}

compiles into (live example)

h1, div-phablet {
  font-size: 3em;
}

If your .phablet mixin looks somewhat like this, then the extend does not hit h1 because extend is located inside the @media directive. When I comment @media away, extend works. I remember this being discussed in some other issue, but I am not sure which one nor how the discussion ended up (e.g. whether it is bug or feature).

@seven-phases-max
Copy link
Member

It's #2095 (pointing to #1165).

As for "no error": hmm, I can't test it with lessc right now, but should not it generate a warning in current versions?

UPD: updated after my mistake, sorry.

@woble
Copy link

woble commented Dec 4, 2015

This does not look like a valid syntax to me to begin with.

.phablet({
    &:extend(h1);
});

@SomMeri
Copy link
Member

SomMeri commented Dec 4, 2015

@woble He defined detached ruleset in a mixin parameter. It works and is just shorter equivalent for:

@detached: {
    &:extend(h1);
};
.phablet(@detached);

@wjohnsto
Copy link
Author

wjohnsto commented Dec 4, 2015

@SomMeri This is unfortunate news :(. Luckily there are other ways to accomplish what I need.

@wjohnsto wjohnsto closed this as completed Oct 2, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants
@woble @SomMeri @wjohnsto @seven-phases-max and others