Реверсивное направление строк для каждого второго ребенка с использованием Bourbon neat

Question

Я пытаюсь изменить схему строки для каждого второго ребенка, используя Bourbon Neat reset-layout-direction mixin. Однако, похоже, это не работает с использованием псевдоселектора nth-child. Что я делаю не так? Здесь представлен codepen

HTML

<div class="boxes"> 
    <div class="project"> 
    <div class="project__image">image</div> 
    <div class="project__text">text</div> 
    </div> 

    <div class="project"> 
    <div class="project__image">image</div> 
    <div class="project__text">text</div> 
    </div> 

    <div class="project"> 
    <div class="project__image">image</div> 
    <div class="project__text">text</div> 
    </div> 

    <div class="project"> 
    <div class="project__image">image</div> 
    <div class="project__text">text</div> 
    </div> 
</div> 

SCSS

.project{ 
    @include row(); 
    //@include row($direction: RTL); //Works here and rightly reverses all rows. 

    .project__image, .project__text { 
    background: tint(red,50%); 
    margin-bottom: 20px; 
    height: 130px; 
    @include span-columns(3 of 6); 
    @include omega(2n); 
    } 

    &:nth-child(2n + 2){ 
     color: red; 
    //@include row($direction: RTL); Doesn't work here 
     } 
} 

Edit: Я пришел к этому решению, но его просто глупо. Мне не нужно повторять стили таким образом - Codepen

Answer 1

Я вижу два варианта. Во-первых, мы можем использовать :nth-child для нацеливания четных строк, но заставляем его работать, используя его для нацеливания нечетных строк. Еще один дублирующий код, чтобы сделать работу Neat, но, по крайней мере, перемещение общего кода в новое правило для уменьшения дублирования.

HTML

<div class="boxes"> 
    <div class="project"> 
    <div class="project__image">image</div> 
    <div class="project__text">text</div> 
    </div> 

    <div class="project"> 
    <div class="project__image">image</div> 
    <div class="project__text">text</div> 
    </div> 
    <!-- And so on... --> 
</div> 

CSS

// Visual styles here. 
.project { 
    @include row($direction: LTR); 

    .project__image, 
    .project__text { 
    background: tint(red,50%); 
    margin-bottom: 20px; 
    height: 130px; 
    } 
} 

// These are your odd rows. Even minus one. 
.project:nth-child(2n-1) { 
    //@include row($direction: RTL); //Works here and rightly reverses all rows. 
    .project__image, 
    .project__text { 
    @include span-columns(3 of 6); 
    @include omega(2n); 
    } 
} 

These are your even rows. 
.project:nth-child(2n) { 
    @include row($direction: RTL); 

    .project__image, 
    .project__text { 
    @include span-columns(3 of 6); 
    @include omega(2n); 
    } 
} 

Вы также можете использовать Flexbox. Такая же разметка HTML, как указано выше. Мы используем Neat для правильной ширины столбцов, а затем удаляем маржу от всех детей. Затем Flexbox используется для разделения столбцов, оставляя желоб. На четных строках мы используем flex-direction: row-reverse; для изменения двух сторон.

CSS

.project { 
    display: flex; 
    justify-content: space-between; 

    .project__image, 
    .project__text { 
    @include span-columns(3 of 6); 
    @include omega(2n); 
    margin-right: 0; 
    background: tint(red,50%); 
    margin-bottom: 20px; 
    height: 130px; 
    } 
} 

.project:nth-child(2n) { 
    flex-direction: row-reverse; 
} 

Определенно меньше кода. CodePen: https://codepen.io/alexbea/pen/jyjqwV