我需要帮助来创建一个 sass mixin。
我有一个名为vertical3的类,它将相同的图像堆叠3次。我还得到一个属性调用重叠,范围从 -2 到 +1,我在下面定义了类。这些重叠类与垂直 3 处于同一水平。
如您所见,它们仅调整前两项的边距。我想为此定义一个 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
}