基於子女數量的款式

Question

我有一個容器（.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

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的數，和總寬度必須由窗口小部件的數目來劃分。