Less multiple parent usage

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 ?

Mixins cannot be extended and Less by default would not combine selectors, so your best bet would probably be the Clean CSS plugin. — Harry, Dec 30 '14 at 14:23

score 1 · Accepted Answer · edited May 23 '17 at 11:50

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

Less multiple parent usage

1 Answers1