使用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 - >.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

丹菲爾德是正確的，只是爲了使它更簡潔：

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