Passing the pseudo-element on the parent class with scss

advertisements

How would I translate the following CSS into 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;
}

The following code does not seem to work:

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


Your scss has the right idea - except that you have a typo in your class name:

.childclass -> .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;
  }
}