使用:n -of-type(偶数)进行flexbox布局的Sass函数

Question

大家下午好!我试图为图像部分创建一个布局，其中每个奇数图像容器在右边有一个图像，在左边有文本，每一个:n型(偶数)基本上是相反的，左边的图像和右边的文本。这就是我到目前为止所做的，但是第n个类型(偶数)选择器完全搞砸了布局。没有它，代码工作，除了图像和文本的顺序不能交替。是否存在一种简洁的Sass方法来循环遍历这些项，并为每个奇数项添加flex-direction: row-reverse，为每个偶数项添加flex-direction: row?

这是一个单独的图像容器的HTML，我总共有6个:

<div class="image__container right">
<div class="image__container-img">
<img src="" alt='' />
</div>
<div class="image__container-text">
<h3 class="title"></h3>
<p></p>
<a href=""></a>
</div>
</div>

CSS:和

.image__container {
@extend .col;
display: flex;
flex-direction: row-reverse;
align-items: center;
&:nth-of-type(even) {
flex-direction: row;
}
}

Answer 1

您可以使用> *来选择.image__container的每个子节点，而:nth-of-type(even)只选择偶数:

.image__container {
display: flex;
flex-direction: row-reverse;
align-items: center;
&>*:nth-of-type(even) {
flex-direction: row;
}
}