css - Sass 中的 If/Else 语句根据列表中的元素数更改 css

Question

我有一个我正在使用 flex 的元素列表。它们水平排成一排。

我想知道是否可以编写一个基本上执行以下操作的 if/else 语句:

如果列表中有 4 个或更少的元素，请使用 justify-content: space-between，但如果有 5 个或更多元素，请使用 justify-content: space-evenly。

我正在努力思考如何编写这样的东西来测试它，但在 Sass 文档中找不到任何涵盖这种情况的内容 - 这样的事情可能吗？

Answer 1

因为你不能使用 SASS 来计算元素，你可以使用 CSS 根据他们的数量来定位 parent 的 child (当/如果我们有一个父选择器，我们也可以定位父 :)

基于此解决方案Can CSS detect the number of children an element has?如果有 5 个或更多，我们可以更改 nth-child 以定位所有。

在您的特定情况下，如果您想更改 justify-content 属性，这将无济于事，因为该属性是在父级上设置的，尽管还有其他方法可以在两者之间创建空间 flex 元素，即自动边距，可以使用此方法的地方。

堆栈片段

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    background: blue;
    height: 20px;
    margin: 5px;
}

/* five or more items */
li:first-child:nth-last-child(n+5),
li:first-child:nth-last-child(n+5) ~ li {
    background: red;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

---

如果这没有帮助，如果其子级超过 4，则使用一个小脚本将一个类添加到父级。

堆栈片段

$('ul').each(function(idx, el) {
  if(el.children.length > 4) {
    $(el).addClass('more_than_4');
  }
});

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    background: blue;
    height: 20px;
    margin: 5px;
}

ul.more_than_4 {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>