sass - sass mixin を使用して一連のクラスを追加する方法

Question

sass mixin の作成について助けが必要です。

同じ画像を3回積み重ねるvertical3というクラスがあります。また、以下でクラスを定義した-2から+1の範囲のプロパティ呼び出しの重複も取得します。これらのオーバーラップ クラスは、バーティカル 3 と同じレベルにあります。

ご覧のとおり、最初の 2 つの項目のマージンのみが調整されます。このためのsass mixinを定義したいと思います。

<div class="vertical3 overlap-3">
    <img>
    <img>
    <img>
</div>


.vertical3 {
    flex-flow: column;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
    img {
        max-height: 27%;
    }
}

.vertical3.overlap-2 {
    img:first-child {
        margin-top: -5%;
    }

    img:nth-child(2) {
        margin-top: -5%;
    }
}
.vertical3.overlap-1 {
    img:first-child {
        margin-top: -2.5%;
    }

    img:nth-child(2) {
        margin-top: -2.5%;
    }
}
.vertical3.overlap2 {
    img:first-child {
        margin-top: 5%;
    }

    img:nth-child(2) {
        margin-top: 5%;
    }
}
.vertical3.overlap1 {
    img:first-child {
        margin-top: 2.5%;
    }

    img:nth-child(2) {
        margin-top: 2.5%;
    }
}

私はこのような何かを達成したいと思います

.vertical3 {
    flex-flow: column;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
    img {
        max-height: 27%;
    }
    @inlcude overlap(2.5%)
}

@mixin overlap($base){
    adding overlap-2 to overlap2 as classes
}