SASS - 親の参照親

Question

私は自分のコードをできるだけDRY状態に保つようにしています。この例を考えてみましょう：

#parent { 
    position: relative; 

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

今私は#childを変更します#parent上のホバー効果を追加したいです。

#parent { 
    position: relative; 

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

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

しかし、私はこの解決策に満足していません。 #childが2度宣言されているため、完全にDRYではありません。それを行うための別の方法は、このようなものです：

#parent { 
    position: relative; 
} 

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

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

#parentが2回宣言されているため、これは間違いなく、より意味的な、ないよりDRYです。

SASSでこれを行うには本当にDRY方法がありますか？

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