버번 (Bourbon)을 사용하여 모든 두 번째 자식에 대한 행 방향 반전

Question

나는 두 번째 자식마다 Bourbon Neat reset-layout-direction mixin을 사용하여 행 레이아웃을 뒤집어려고합니다. 그러나 이것은 n 번째 자식 의사 선택기를 사용하여 작동하지 않는 것 같습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 여기에 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

두 가지 옵션이있다. 먼저 :nth-child을 사용하여 짝수 행을 타겟팅 할 수 있지만이 행을 사용하여 홀수 행을 타겟팅 할 수도 있습니다. 여전히 깨끗한 코드를 작성하는 코드가 있지만 적어도 공유 코드를 새로운 규칙으로 이동시켜 중복을 줄입니다.

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