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