Как установить тот же цвет для элемента при наведении на него?

Question

Я просто пытаюсь установить тот же самый цвет для элемента при отображении и при наведении на него курсора, но по какой-то причине я не могу заставить свой sass работать.Может кто-то указать мне верное направление?Большое спасибо!

Вот мой sass:

Это не работает:

.myfield{
  &:hover{
    border: 2px solid red;
  }
}

Это работает:

.myfield{
  border: 2px solid red;
  &:hover{
    border: 2px solid red;
  }
}

Однако я не хочу повторять одну и ту же границу 2 раза.Как правильно написать это?

Answer 1

Хотя мне может быть трудно увидеть использование установки одной и той же границы дважды (для селектора и селектора: hover), это может работать для вас:

.myfield {
  &, &:hover{
    border: 2px solid red;
  }
}

, так как это приводит к:

.myfield, .myfield:hover {
  border: 2px solid red;
}

Это должно быть семантически эквивалентным приведенному выше коду (с пометкой Работающий), который выдает:

.myfield {
  border: 2px solid red;
}
.myfield:hover {
  border: 2px solid red;
}

Редактировать: Попробуйте взглянуть на https://www.sassmeister.com/ для «простого» тестирования того, что производится css.Это часто проще, чем испытать его в «реальной жизни», особенно когда все sass / scss проходят через конвейер ресурсов и т. Д.