Question

有一些我想知道的东西。我使用较少的项目，我想知道是否可以做类似的事情;

我想在下面做这个css结果;

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

我怎么能按照自己的意愿去做？

Answer 1

您不必为.dropdown-menu{ & > li使用parent reference，也可能想知道为什么要嵌套.dropdown > li > a选择器。

但除此之外，您可以使用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代码：

.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了解有关此类内容的更多信息，最后您应该考虑不为您的属性添加前缀，而是使用autoprefixer，另请参阅：LESS transition mixin with prefixes

减少多个父级使用

1 个答案: