减少扩展和背景位置 属性
LESS extend & background-position property
我无法弄清楚为什么 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 开发者工具中的样子:
是的,我是对的!那是因为 background-position
属性 是首先定义的,然后我正在更改 background
,这会重置所有先前定义的与背景相关的属性。
我无法弄清楚为什么 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 开发者工具中的样子:
是的,我是对的!那是因为 background-position
属性 是首先定义的,然后我正在更改 background
,这会重置所有先前定义的与背景相关的属性。