LESS ext & background-position свойство

63
7

Я не могу понять, почему свойство 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 Developer, когда я проверяю этот элемент при зависании, background-posistion. Это потому, что я позже сброс background и после этого сброса, background-position больше не используется для этого?

Как он выглядит в инструменте Google Chrome Developer:

enter image description here

Спасибо за помощь!

спросил(а) 2021-01-25T18:53:19+03:00 5 месяцев назад
1
Решение
99

Да, я был прав! Это потому, что свойство background-position определено первым, и после него я меняю background который сбрасывает все ранее определенные свойства, связанные с фоном.

ответил(а) 2021-01-25T18:53:19+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема