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

Allow for arbitrary selectors to be used as mix-ins #1629

Closed
mouyang opened this issue Nov 1, 2013 · 3 comments
Closed

Allow for arbitrary selectors to be used as mix-ins #1629

mouyang opened this issue Nov 1, 2013 · 3 comments

Comments

@mouyang
Copy link
Contributor

mouyang commented Nov 1, 2013

It seems like not all CSS selectors can be used in mix-ins, it would be nice if any selector could be used. I couldn't figure out how to save a scratchpad from less2css (it only supports up to 1.4.1 anyway) so I put the examples here.

Example 1:

a a { font-size: 1; }

b { #a a; } <-- Parse error

Example 2:
a:hover { font-size: 1; }

b { a:hover; } <-- outputs "#b { a: hover; }" instead of "#b { font-size: 1; }"

I'm really new to less, so I am unaware of a way to do this in the current version. I don't know what will be suitable proposal because it may conflict with other features.

The usage case I have is quite simple. I want to build a tab interface with jQuery-ui using pre-existing styles from a previous home-grown solution. Some of the styles follow the patterns above. I can work around this by defining custom classes but I would rather not do it that way because I want to keep the existing stylesheets as clean as possible.

Workaround 1:
.blah, #a a { font-size: 1; }

b { .blah; }

Workaround 2:
.bridgeClass, a:hover { font-size: 1; }

b { .bridgeClass; }

@seven-phases-max
Copy link
Member

See #1048, #1395. The Extend feature gives the best fit for this task.

@SomMeri
Copy link
Member

SomMeri commented Nov 2, 2013

An example how to use extend to solve your problem with the extend keyword.

If you do this:

#a a { font-size: 1; }
#b:extend(#a a){}

then less.js will add #b selector into all rulesets with #a a selector:

#a a,
#b {
  font-size: 1;
}

I will close this as a duplicate, because the issue #1048 covers the same problem. If you think that extend does not solve your problem, feel free to make your case there. The feature is more likely to be added if we known about something that is not possible to achieve without it.

@SomMeri SomMeri closed this as completed Nov 2, 2013
@mouyang
Copy link
Contributor Author

mouyang commented Nov 4, 2013

Thank you for the feedback, SomMeri. I was a bit apprehensive of using extend due to the classic composition over inheritance argument made in object-oriented programming. Perhaps the diamond problem is not relevant to less, I am currently unable to say for sure without more experience. I'll give it a try.

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

3 participants