Question

是否可以使用任何SASS功能确定任何容器的子数？

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

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

对于这个容器，我想实现一个+columns_3的mixin 但如果容器中有第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;
    }
  }
}

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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;

}

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

是否可以使用任何SASS功能确定任何容器的子数？

3 个答案: