Wendereihenrichtung für jedes zweite Kind mit Bourbon ordentlich

Question

Ich bin versucht, die Zeile Layout für jedes zweite Kind Ordentlich reset-layout-direction mixin mit Bourbon zu umkehren. Dies scheint jedoch nicht mit dem N-Kind-Pseudo-Selektor zu funktionieren. Was mache ich falsch? Hier ist die 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: Ich habe kommen mit dieser Lösung aber es ist einfach albern. Ich sollte nicht brauchen Arten auf diese Weise zu wiederholen - Codepen

Answer 1

Ich sehe zwei Möglichkeiten. Zuerst können wir :nth-child verwenden, um die geraden Zeilen zu targetieren, aber es funktioniert, indem wir es auch verwenden, um die ungeraden Zeilen zu targetieren. Immer noch ein paar doppelt aussehender Code, um Neat zum Laufen zu bringen, aber zumindest den geteilten Code in eine neue Regel zu verschieben, um die Duplizierung zu reduzieren.

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); 
    } 
} 

Sie auch Flexbox nutzen könnten. Gleiches HTML-Markup wie oben. Wir verwenden Neat für die richtigen Spaltenbreiten und entfernen dann den Rand von allen untergeordneten Elementen. Dann wird Flexbox verwendet, um die Spalten zu trennen und eine Rinne zu hinterlassen. In geraden Reihen verwenden wir flex-direction: row-reverse;, um die zwei Seiten umzukehren.

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; 
} 

Definitiv weniger Code. CodePen: https://codepen.io/alexbea/pen/jyjqwV