Question

如何在SASS中随机化浮动（不透明度）和百分比（位置）？ 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。

如何在SASS中随机化浮动和百分比？

1 个答案: