减少多个家长的使用 [英] Less multiple parent usage

问题描述

有件事我想知道.我正在使用的项目减少了，我想知道是否可以做类似的事情；

There is a something i've wondered. I am using less my project and i wonder is it possible to do something like;

我想在下面做这样的CSS结果；

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);
}

我这样少用了

.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);
        }
    }
}

但结果是;

.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);
}

我怎么能少做些什么?

推荐答案

您不必使用

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);
        }
    }
}

编译成如下所示的CSS代码:

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);
}

您可以在以下位置了解有关此类内容的更多信息: https://github. com/less/less.js/issues/1075 ，最后您应该考虑不为属性添加前缀，而是使用自动前缀，也请参见:

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

这篇关于减少多个家长的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！