根据孩子数量的样式

Question

我有一个容器（.homepage-section），其中最多可以有三个.widget。根据{{​​1}}内的.widget的数量，我希望宽度可以改变。

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

这是我写的SASS函数（到目前为止）：

.homepage-section

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

Answer 1

尝试以下方法：

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

（参见edited pen）。

一般规则 - 对于每个小部件计数，nth-*和nth-last-*中的数字总和必须是小部件的数量加1，并且总宽度必须除以小部件的数量