基于孩子数量的样式 [英] Styles based on number of children

问题描述

我有一个容器（ .homepage-section ），里面可以有三个 .widget 的。根据 .homepage-section 里面有多少 .widget ，我想要改变宽度。

I have a container (.homepage-section) and inside this there could be up to three .widget's. Depending on how many .widget's there inside of .homepage-section, I'd like the widths to change.

我遵循了Lea Verou概述的方法（链接），但没有成功。

I've followed the approach outlined by Lea Verou (link) but with no success.

这里是SASS函数I （到目前为止）：

Here's the SASS function I've written (so far):

.widget {
     @for $i from 1 through 3 {
       &:first-of-type:nth-last-of-type(#{$i}),
       &:first-of-type:nth-last-of-type(#{$i}) ~ .widget {
         width: (1000px / #{$i});
       }
     }
  }

http://codepen.io/anon/pen/BKwte

推荐答案

尝试以下操作：

.widget {
  @for $j from 2 through 5 {
    @for $i from 1 through $j {
      &:nth-of-type(#{$j + 1 - $i}):nth-last-of-type(#{$i}),
      &:nth-of-type(#{$j + 1 - $i}):nth-last-of-type(#{$i}) ~ .widget {
        width: (1000px / $j);
      }
    }
  }
}

请参阅编辑的钢笔）。

一般规则 - 对于每个小部件的数量， nth - * 和 nth-last - * 必须是小部件的数量加上1，并且整体宽度必须除以小部件的数量。

The general rule — for each count of widgets, the sum of numbers in nth-* and nth-last-* must be the number of widgets plus 1, and the overall width must be divided by the number of widgets.

这篇关于基于孩子数量的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！