增加SASS中的填充

Question

我想让子元素的填充增加10px。

我尝试过以下方法：

$lpad: 10px;
$i: 1;

@for $i through 20 {
    .myEm:nth-child($i) {
        padding-left: $lpad * $i;            
    }
    $i: $i + 1;
}

看起来不对，但似乎无法奏效。我错过了什么？

Answer 1

这不是一个循环。即便如此，这也不是CSS的运作方式。

如果你的元素是嵌套的，你可以这样做：

.el { 
  padding-left: 10px;
  > .el {
    padding-left: 20px;
  }
}

如果你的元素是兄弟姐妹：

@for $i from 1 through 20 {
  .simLvl:nth-child(#{$i}) {
    margin-left: $lpad * $i;
  }
}