sass - 是否可以使用任何 SASS 函数确定任何容器的子级数量？

Question

是否可以使用任何 SASS 函数确定任何容器的子级数量？

例如，我有一个包含 3 列的容器：

    <div class="columns columns_3">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>

对于这个容器，我想实现一个 mixin+columns_3 但如果容器有第 n 个孩子，mixin 将是+columns_n

Answer 1

您想要知道有多少孩子拥有一个元素并为其设置正确的类。您需要 Javascript 来检测子元素、HTML 和 CSS 的数量。

SCSS

.element {
  $width: 100%;
  width: $width;

  div {
    height: 100px;
    float: left;
    border:1px solid #000;
    box-sizing: border-box;
  }

  @for $i from 1 through 12 {
    &--#{$i} div {
      width: $width/$i;
    }
  }
}

var element = document.getElementsByClassName('element')[0];
var childs = element.childElementCount;
element.classList.add("element--"+childs);

.element {
  width: 100%;
}
.element div {
  height: 100px;
  float: left;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.element--4 div {
  width: 25%;
}

<div class="element">
  <!-- childs -->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

好吧，如果你有一个范围，你可能会使用一个 for 循环——这取决于你需要做什么。例如：

$gridWidth = 100%;
@for $numItems from 1 through 12 {
  .columns_#{$numItems} {
    .column {
      width: $gridWidth / $numItems;
    }
  }
}

Answer 3

我认为你可以做到这一点：

@function number(val) { @return val };


@mixins +columns_#{number(10)} {

  // Your code;

}

我不确定我理解你的解释。