Блог

итак, моя проблема, как я уже говорил, заключается в том, что я не вижу действия при наведении курсора при наведении кнопки

Вот моя кнопка в html

 <button class="btn">button</button>
 

И вот мой код в scss для наведения

  .btn{
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;
    :hover{
        background-color: aqua;
    }
}
 

Вот код в css после того, как «sass watcher» сделает его css

 .btn {
  background-color: #e5383b;
  font-variant-caps: all-petite-caps;
  border-radius: 2px;
}

.btn :hover {
  background-color: aqua;
}
 

Вот изображение, на котором показан результат

(Вы не видите мою мышь, но я навел ее)

Вам нужно убрать пробел .btn :hover { . Пробел между селекторами указывает на вложенные элементы, поэтому .a .b { b тег, вложенный в an a , будет выглядеть так .

Для этого вы можете добавить амперсанд в состояние наведения при такой вложенности.

 .btn {
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;

    amp;:hover {
        background-color: aqua;
    }
}
 

Амперсанд указывает, что вы должны взять родительский элемент и заменить его прямо там. Таким образом, scss возьмет .btn и свяжет его, :hover и вы получите результат, которого ожидали.

поставьте » amp; » на свой курсор

 .btn {
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;

    amp;:hover {
        background-color: aqua;
    }
}
 

Для SCSS, если вы вложены и хотите использовать псевдокласс или элементы, вам нужно поставить amp; перед любым псевдоклассом или псевдоэлементами

SCSS:

 .class {
    margin: 0;
    padding: 0;
    amp;:hover {                 // Notice the use of 'amp;' before pseudo class 'hover' 
       background-color: red; 
    }
}
 

это приведет к тому, что

 .class {
    margin: 0;
    padding: 0;
}

.class:hover {
    background-color: red;
}