SASS - 父母的參考父母

Question

我試圖讓我的代碼儘可能幹。考慮下面這個例子：

#parent { 
    position: relative; 

    #child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 
} 

現在，我想補充的#parent懸停效果，這將改變#child。我知道我可以這樣做：

#parent { 
    position: relative; 

    #child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 

    &:hover #child { 
    transform: scale(1.2, 1.2); 
    } 
} 

但我對此解決方案並不滿意。它不完全乾，因爲#child被宣佈兩次。另一種方式來做到這一點是這樣的：

#parent { 
    position: relative; 
} 

#child { 
    position: absolute; 
    top: 0; 
    left: 0; 

    #parent:hover & { 
    transform: scale(1.2, 1.2); 
    } 
} 

這無疑是更多的語義，但沒有更幹，因爲#parent聲明兩次。

SASS有沒有真正乾的方法？

Answer 1

我至少有5種美麗的方式來做到這一點。我會分享1，如果你想更多，我可以分享更多。

使用功能

@mixin onParentHover() { 
    $rootString: #{&}; 
    $parentIndex: str-index($rootString, " "); 
    $parent: str_slice($rootString, 0, $parentIndex - 1); 
    $children: str_slice($rootString, $parentIndex); 

    @at-root #{$parent}:hover #{$children} { 
    @content; 
    } 
} 

使用

#parent { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    #child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    @include onParentHover { 
     transform: scale(1.2, 1.2); 
    } 
    } 
} 

最終輸出

#parent { 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 
#parent #child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
#parent:hover #child { 
    text-size: 20px; 
}