使用scss在父类上悬停伪元素

Question

我如何将以下CSS翻译成SCSS？

.parent-class:hover .child-class {
  visibility: visible;
  animation-name: bounceIn;
  animation-duration: 450ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  transition-delay:0s;
}

以下代码似乎不起作用：

.parent-class{
  &:hover .childclass{
    visibility: visible;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transition-delay:0s;
  }
}

Answer 1

你的scss有正确的想法 - 除了你的班级名字有错字：

.childclass - ＆gt; .child-class

.parent-class{
  &:hover .child-class{
    visibility: visible;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transition-delay:0s;
  }
}

Answer 2

Danield是对的，只是为了让它更简洁：

.parent-class {
  &:hover .child-class {
    visibility: visible;
    animation: bounceIn 450ms linear forwards;
    transition-delay: 0s;
  }
}