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

编辑：我已经提出了这个解决方案，但它只是愚蠢。我不需要以这种方式重复样式 - 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

使用Bourbon整齐反转每个第二个孩子的行方向

1 个答案: