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>