CSS Susy Gallery - 最后一行居中，第 nth-last-child

Question

我有一个 4 列 Susy CSS 画廊网格，可以包含任意数量的块。如果最后一行少于 4 个块，我需要将它居中。

使用这种 css 选择器技术 http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ I have been able to offset specific blocks as you can see in this pen: 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 mixin。

更新

这里根据 vals 的回答更新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 了解不多，但让我们看看如何在最后一行定位特定元素。红色选择器只是为了展示它是如何工作的，并且会在生产代码中被删除

/* 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>

CSS Susy Gallery - 最后一行居中，第 nth-last-child

CSS Susy Gallery - Center Last Row with nth-last-child

html

css

susy