CSS Susy畫廊 - 中心最後一行與第n個最後孩子

Question

我有一個4列Susy CSS畫廊網格，可以包含任何數量的塊。如果最後一行少了4個塊，我需要它居中。

使用這個CSS選擇器技術http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/我已經能夠抵消特定塊，你可以在此筆見：http://codepen.io/bennyb/pen/kXVaba

使用此代碼：

// Total of 1 or 5 
ul li:first-child:nth-last-child(1), 
ul li:first-child:nth-last-child(5) + li + li + li + li { 
    @include push(4.5); 
} 

// Total of 2 or 6 
ul li:first-child:nth-last-child(2), 
ul li:first-child:nth-last-child(6) + li + li + li + li { 
    @include push(3); 
} 

ul li:first-child:nth-last-child(2) + li, 
ul li:first-child:nth-last-child(6) + li + li + li + li + li { 
    @include push(6); 
} 

// Total of 3 or 7 
ul li:first-child:nth-last-child(3), 
ul li:first-child:nth-last-child(7) + li + li + li + li { 
    @include push(1.5); 
} 

ul li:first-child:nth-last-child(3) + li, 
ul li:first-child:nth-last-child(7) + li + li + li + li + li { 
    @include push(4.5); 
} 

ul li:first-child:nth-last-child(3) + li + li, 
ul li:first-child:nth-last-child(7) + li + li + li + li + li + li { 
    @include push(7.5); 
} 

正如你所看到的只是工作，如果有不到8件物品。有誰知道我可以如何改善這個，所以它可以與任何數量的項目，也許與SASS混合。

更新

這裏是基於丘壑答案更新CSS：

// One widow 
ul li:first-child:nth-last-child(1), 
ul li:first-child:nth-last-child(4n + 1) ~ li:nth-last-child(1) { 
    @include push(4.5); 
} 

// Two widows 
ul li:first-child:nth-last-child(2), 
ul li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(2) { 
    @include push(3); 
} 
ul li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(1) { 
    @include push(6); 
} 

// Three widows 
ul li:first-child:nth-last-child(3), 
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(3) { 
    @include push(1.5); 
} 
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(2) { 
    @include push(4.5); 
} 
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(1) { 
    @include push(7.5); 
} 

Answer 1

不知道很多關於與Susy，但讓我們看看如何針對最後一行的具體內容。紅色的選擇是隻shiow它是如何工作的，並會在生產代碼中刪除

/* target list with only 1 element in the last row */ 
 
li:first-child:nth-last-child(4n + 1) { 
 
    background-color: red; 
 
} 
 

 
/* target last element of list with only 1 element in the last row */ 
 
li:first-child:nth-last-child(4n + 1) ~ li:nth-last-child(1) { 
 
    background-color: blue; 
 
}

<ul> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li> 
 
<li>7</li> 
 
<li>8</li> 
 
<li>9</li> 
 
</ul>

/* target list with 2 elements in the last row */ 
 
li:first-child:nth-last-child(4n + 2) { 
 
    background-color: red; 
 
} 
 

 
/* target last elements of list */ 
 
li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(2) { 
 
    background-color: green; 
 
}li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(1) { 
 
    background-color: blue; 
 
}

<ul> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li> 
 
<li>7</li> 
 
<li>8</li> 
 
<li>9</li> 
 
<li>10</li> 
 
</ul>

/* target list with 3 elements in the last row */ 
 
li:first-child:nth-last-child(4n + 3) { 
 
    background-color: red; 
 
} 
 

 
/* target last elements of list */ 
 
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(3) { 
 
    background-color: yellow; 
 
} 
 
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(2) { 
 
    background-color: green; 
 
} 
 
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(1) { 
 
    background-color: blue; 
 
}

<ul> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li> 
 
<li>7</li> 
 
<li>8</li> 
 
<li>9</li> 
 
<li>10</li> 
 
<li>11</li> 
 
</ul>