LESS - Mixin 打破悬停风格时的按钮渐变答案

【问题标题】：LESS - Button Gradient as Mixin Breaks Hover StyleLESS - Mixin 打破悬停风格时的按钮渐变
【发布时间】：2017-07-11 00:57:11
【问题描述】：

我将一些渐变按钮样式移到了 mixin 中，现在悬停样式不正确。悬停状态应该在顶部应用渐变的背景偏移，但是当用作混合时，它以相反的顺序应用，即偏移应用在渐变的顶部，使按钮看起来像是两个不同的实体颜色。使用 mixin 应用这些样式的正确方法是什么？

样式

.btn-primary {
  background-color: hsl(98, 35%, 73%) !important;
  color: #333 !important;
  .btn-gradient(#ebf3e6, #b3d2a2);
}

混音

.btn-gradient(@startColor, @endColor) {
  border-color: @endColor @endColor hsl(98, 35%, 68%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor);
  background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background-image: -moz-linear-gradient(top, @startColor, @endColor);
  background-image: -ms-linear-gradient(top, @startColor, @endColor);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor));
  background-image: -webkit-linear-gradient(top, @startColor, @endColor);
  background-image: -o-linear-gradient(top, @startColor, @endColor);
  background-image: linear-gradient(@startColor, @endColor);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
  -webkit-font-smoothing: antialiased;
  &:hover {
    background-position: 0 -15px;
  }
}

Mixin 悬停

没有 mixin 悬停

【问题讨论】：

Mixins 不会重新排序任何样式/属性，所以基本上你会得到你写的东西。为了获得一些建设性/有用的答案，我建议您将更多关于“1.我想要的 CSS 2.我得到的 CSS”的详细信息放入 Q 中。

标签： css-selectors less mixins

【解决方案1】：

原来我错过了 background-repeat: repeat-x;来自 mixin。

【讨论】：