You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
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; }
The text was updated successfully, but these errors were encountered: