Я пытаюсь добавить псевдоселектор :hover с помощью Less. Но каждый раз, когда я пытаюсь, он добавляет пробел между именем класса и псевдоселектором.
Мне было интересно, знает ли кто-нибудь, как решить эту проблему. Любая помощь могла бы быть полезна!
Ниже мой код
Меньше кода
.well{
display: inline-block;
text-decoration: none;
color: #000;
:hover{
color: #000;
}
}
Сгенерированный код CSS
.well :hover {
color: #000;
}
Используйте 1_:
.well{
display: inline-block;
text-decoration: none;
color: #000;
&:hover{
color: #000;
}
}
Оператор
&представляет родительские селекторы вложенного правила и чаще всего используется при применении модифицирующего класса или псевдокласса к существующему селектору.
Меньше добавляет пробел, потому что, когда вы вкладываете селектор в другой, вложенный селектор считается дочерним или потомком (если явно не указано иное). В CSS любой селектор элемента-потомка отделяется от родителя пробелом, поэтому пробел добавляется.
Исправление заключается в добавлении дочернего элемента к родительскому селектору &. Это сообщает компилятору Less, что вложенный селектор на самом деле не является селектором дочернего элемента/потомка, а на самом деле является приложением к родителю.
.well{
display: inline-block;
text-decoration: none;
color: #000;
&:hover{
color: #000;
}
}
