less.ruby
less.ruby copied to clipboard
less
Reference to parent selector
Is there any way to reference to the parent selector? To do something like this: a.button { height: 20px; width: 100px; background-repeat: no-repeat;
&.email {
background-image: url(email.png);
}
&.twitter {
background-image: url(twitter.png);
}
}
As you can see, I am using the & character to reference to the parent selector.
My goal is to apply the specified background-images to a.button.email and a.button.twitter, without having to write a.button again, when I'm already in the a.button block.
Do you mean to accomplish the following?
a.button {
height: 20px;
width: 100px;
background-repeat: no-repeat;
}
a.email {
background-image: url(email.png)
}
a.twitter {
background-image: url(twitter.png)
}
Are you trying to use the parent selector to discriminate against as that don't have the button class? If it's not likely that any a tag will have the email or twitter classes and not the button class, this will work as expected.
more likely
a.button {
height: 20px;
width: 100px;
background-repeat: no-repeat;
}
a.button.email {
background-image: url(email.png)
}
a.button.twitter {
background-image: url(twitter.png)
}
Wow, I had completely forgotten about chaining class names. You're right, that's far more accurate.
So I guess we need a more compelling use case for this feature, right?
What jtousek says.
I want the & character (or any other special char) to reference to the parent selector, just like pseudo-classes like :hover do by default.
xdissent: you mean something like this? (it convinced cloudhead) http://github.com/cloudhead/less/issues/#issue/109/comment/77628
Exactly! Sheesh, I'm behind the times. But for clarification, in Douwe's case, chaining classnames with a period will suffice. Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>OMGWOW</title>
<style type="text/css">
a {
background-color: #f00; /* Red */
}
a.email {
background-color: #0f0; /* Green */
}
a.twitter {
background-color: #00f; /* Blue */
}
a.button {
background-color: #ff0; /* Yellow */
border: 1px solid #000;
}
a.button.email {
background-color: #0ff; /* Cyan */
}
a.button.twitter {
background-color: #f0f; /* Magenta */
}
</style>
</head>
<body>
<p><a href="http://example.com">Link</a></p>
<p><a class="email" href="mailto:[email protected]">Email link</a></p>
<p><a class="twitter" href="http://twitter.com">Twitter link</a></p>
<p><a class="button" href="http://example.com">Button</a></p>
<p><a class="button email" href="mailto:[email protected]">Email button</a></p>
<p><a class="button twitter" href="http://twitter.com">Twitter button</a></p>
</body>
</html>
Thanks though, I do see how this feature could be very useful now. Maybe merge these issues?
Well, when LESS would implement some way to reference the parent selector, you could do that like this: a.button { background-color: #ff0; /* Yellow */ border: 1px solid black;
&.email {
background-color: #0ff; /* Cyan */
}
&.twitter {
background-color: #f0f; /* Magenta */
}
}
(Assume & is the special character)
Much cleaner in my opinion ;-)
Right, but it's possible to accomplish right now, which is cool. I agree this should be implemented, though. It is nicer than the alternative, especially with long selectors.
Yeah, of course it's possible, everything you can do in LESS is possible in CSS, it's just way easier / cooler / cleaner ;-)