Less multiple parent usage - less

Question

There is a something i've wondered. I am using less my project and i wonder is it possible to do something like;
i want to do like this css result below;
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: #ffffff;
background-color: #3DA857;
background-image: -moz-linear-gradient(top, #3DA857, #3DA857);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3DA857), to(#3DA857));
background-image: -webkit-linear-gradient(top, #3DA857, #3DA857);
background-image: -o-linear-gradient(top, #3DA857, #3DA857);
background-image: linear-gradient(to bottom, #3DA857, #3DA857);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
i used like this with less
.menuFocusHover(#fontColor, #bgColor) {
text-decoration: none;
color: #fontColor;
background-color: #bgColor;
background-image: -moz-linear-gradient(top, #bgColor, #bgColor);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bgColor), to(#bgColor));
background-image: -webkit-linear-gradient(top, #bgColor, #bgColor);
background-image: -o-linear-gradient(top, #bgColor, #bgColor);
background-image: linear-gradient(to bottom, #bgColor, #bgColor);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
.dropdown-menu{
& > li {
> a {
&:hover, &:focus {
.menuFocusHover(#white,#baseColor);
}
}
}
}
.dropdown-submenu {
&:hover, &:focus {
> a {
.menuFocusHover(#white,#baseColor);
}
}
}
but result is;
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
color: #ffffff;
background-color: #3da857;
background-image: -moz-linear-gradient(top, #3da857, #3da857);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3da857), to(#3da857));
background-image: -webkit-linear-gradient(top, #3da857, #3da857);
background-image: -o-linear-gradient(top, #3da857, #3da857);
background-image: linear-gradient(to bottom, #3da857, #3da857);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: #ffffff;
background-color: #3da857;
background-image: -moz-linear-gradient(top, #3da857, #3da857);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3da857), to(#3da857));
background-image: -webkit-linear-gradient(top, #3da857, #3da857);
background-image: -o-linear-gradient(top, #3da857, #3da857);
background-image: linear-gradient(to bottom, #3da857, #3da857);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
How can i do as i want with less ?

Answer 1

You don't have to use a parent reference for .dropdown-menu{ & > li and you could also wonder why you nest the .dropdown > li > a selector.
But beside the above you could solve your question by using the extend feature:
#white: white;
#baseColor: blue;
.menuFocusHover(#fontColor, #bgColor) {
text-decoration: none;
color: #fontColor;
background-color: #bgColor;
background-image: linear-gradient(to bottom, #bgColor, #bgColor);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
.dropdown-menu{
> li {
> a {
&:hover, &:focus {
.menuFocusHover(#white,#baseColor);
}
}
}
}
.dropdown-submenu {
&:hover, &:focus {
> a {
&:extend(.dropdown-menu > li > a:hover);
}
}
}
Compiles into the CSS code like that shown beneath:
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: white;
background-color: blue;
background-image: linear-gradient(to bottom, blue, blue);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3DA857', endColorstr='#3DA857', GradientType=0);
}
You can read more about this kind of stuff at: https://github.com/less/less.js/issues/1075 and finally you should consider to not prefix your properties, but use the autoprefixer instead, see also: LESS transition mixin with prefixes