基于孩子数量的样式

【问题标题】：Styles based on number of children基于孩子数量的样式
【发布时间】：2014-09-21 01:14:55
【问题描述】：

我有一个容器 (.homepage-section)，里面最多可以有三个 .widget。根据.homepage-section 内部有多少.widget，我希望改变宽度。

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

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

.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

【问题讨论】：

标签： css sass

【解决方案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，并且总宽度必须除以小部件数量。

【讨论】：