较少扩展和背景位置属性

Question

我无法找出原因，为什么background-position属性在我的LESS代码示例中不起作用。在覆盖按钮悬停的默认按钮样式类时尝试使用此属性。

@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

是的，我是对的！那是因为先定义vlookup()属性，然后再更改background-position，这将重置所有先前定义的与背景相关的属性。