scss嵌套，需要重复

Question

一个快速问题：

为什么我必须重复每个嵌套状态的位置和顶部的第一个弓箭？我认为重点不在重复呢？ 如果我删除嵌套类中的状态，它不起作用。

我想使用它们，如：

标志已去左上所以我用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%); 
    } 
} 

输出

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