scssネスティング、必要な繰り返し

Question

1つの簡単な質問：

なぜ、すべてのネストされた状態で最初と最後の位置を同じように繰り返す必要がありますか？私はそれを繰り返すことではないと思った？ 入れ子になったクラスの状態を削除すると、それは機能しません。

私が好きなそれらを使用したい：

ロゴがトップ行かなければならない、私はクラスとしてtop__left使うので、左メニューのすなわちtop__right等...

.top { 
    position: fixed; 
    top: 2%; 
    &__left { 
    position: fixed; 
    top: 2%; 
    left: 1%; 
    } 
    &__right { 
    position: fixed; 
    top: 2%; 
    right:1%; 
    } 
    &__centered { 
    position: fixed; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    } 
} 

Answer 1

それは両親セレクタのすべてのプロパティを継承しても意味がありませんが、例のために、我々が@extendディレクティブを持っていることが望ましいです：

SASS

.top { 
    position: fixed; 
    top: 2%; 
    &__left { 
    @extend .top ; 
    left: 1%; 
    } 
    &__right { 
    @extend .top; 
    right:1%; 
    } 
    &__centered { 
    position: fixed; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    } 
} 

OUTPUT

.top, .top__left, .top__right { 
    position: fixed; 
    top: 2%; 
} 
.top__left { 
    left: 1%; 
} 
.top__right { 
    right: 1%; 
} 
.top__centered { 
    position: fixed; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Answer 2

私は複数を使用することをお勧めクラス：

.top { 
    position: fixed; 
    top: 2%; 
    &.left { 
    left: 1%; 
    } 
    &.right { 
    right:1%; 
    } 
    &.centered { 
    top: initial; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    } 
} 

あなたはこのようにそれを使用することができます：

<div class="top left"></div> 
<div class="top right"></div> 
<div class="top centered"></div>