减少扩展和背景位置 属性

Question

我无法弄清楚为什么 background-position 属性 在我的 LESS 代码示例中不起作用。尝试在覆盖按钮悬停的默认按钮样式 class 时使用此 属性。

@green: #01eac6;
@blue: #0273dc;
@ocean: #01eac6;
@white: #fff;

@brand-primary: @blue;
@brand-primary-hover: @blue;
@brand-secondary: @ocean;

@transition-time: .3s;

.btn.btn-brand {
  background: @brand-primary linear-gradient(to bottom right, @brand-primary, @brand-secondary);
  background-size: 1px 200px;
  transition: background @transition-time;
  border: 0;

  &:hover:not(:disabled) {
    background-position: 100px;
  }
}

.custom-button--brand {
  &:extend(.btn.btn-brand);
  color: @white;
  background: @brand-primary;

  &:hover:not(:disabled) {
    &:extend(.btn.btn-brand:hover:not(:disabled));
    color: @white;
    background: @brand-primary linear-gradient(to bottom right, @brand-primary, @brand-secondary);
    background-size: 1px 200px;
  }
}

在 Google Chrome 开发者工具中，当我在悬停状态下检查此元素时，background-posistion 被条带化了。 那是因为我稍后要重置 background 并且在重置之后，background-position 不再使用它了？

它在 Google Chrome 开发者工具中的样子：

Answer 1

是的，我是对的！那是因为 background-position 属性 是首先定义的，然后我正在更改 background ，这会重置所有先前定义的与背景相关的属性。