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

Question

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

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

对于这个容器，我想实现一个 mixin，它是 +columns_3 但是如果容器有第n个children，mixin就会是+columns_n

Answer 1

我想你可以做到：

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


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

  // Your code;

}

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

Answer 2

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

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

Answer 3

你想要的是知道有多少孩子有一个元素并设置正确的 class 给它。您需要 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>

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

Is it possible to determine number of children of any container using any SASS function?

sass

mixins

scss-lint