Bourbonを使用して2番目のすべての子供の行方向を反転する

Question

私はBourbon Neat reset-layout-direction mixinを使用して2番目の子供ごとに行レイアウトを逆転しようとしています。ただし、これは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 
     } 
} 

編集です：私は、このソリューションが、そのちょうど愚かを作ってみました。私はこのようにスタイルを繰り返す必要はありません - Codepen

Answer 1

私は2つのオプションを参照してください。まず、: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); 
    } 
} 

あなたはまた、フレキシボックスを使用することができます。上記と同じHTMLマークアップ。適切な列の幅にNeatを使用し、すべての子からマージンを削除します。 Flexboxを使用して列を区切り、溝を残します。偶数行では、flex-direction: row-reverse;を使用して2つの面を逆にします。

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