css - 如何在 SASS 中随机化 float 和百分比？

Question

如何在 SASS 中随机化 float (对于不透明度)和百分比(对于位置)？ https://codepen.io/anon/pen/XZMXMM

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

对于位置，我只能按 px 随机化，如果我输入 %，它就不起作用。

.child {
  position: absolute;
  top: 50px;
  background: #333;
  width: 15px;
  height: 15px;
}

@for $i from 0 to 15 {
  .parent .child:nth-child(#{$i}) {

     // Instead of px this should randomize by percent up to 100% (20%, 45%, 77%...)
     left: random(100) + px; 

     // This should randomize opacity (0.5, 0.7, 0.9, ...)
     opacity: 1;

  }
}

Answer 1

您可以使用以下解决方案使用 percentage功能:

@for $i from 0 to 15 {
  .parent .child:nth-child(#{$i}) {

    //this should randomize by percent up to 100% (20%, 45%, 77%, ...)
    left: percentage(random(100) / 100);

    //this should randomize opacity (0.5, 0.7, 0.9, ...)
    opacity: random(10) / 10;
  }
}

您也可以使用不带 percentage 的原始答案功能:

@for $i from 0 to 15 {
  .parent .child:nth-child(#{$i}) {

    //this should randomize by percent up to 100% (20%, 45%, 77%, ...)
    left: random(100) / 100 * 100%;

    //this should randomize opacity (0.5, 0.7, 0.9, ...)
    opacity: random(10) / 10;
  }
}

你可以找到一个working demo on CodePen .