在计算中使用n

Answer 1

不；你不能那样做。

counter

功能几乎可以做到这一点，只是它也不能与 calc() 一起使用。

Answer 2

@for $i from 1 through 7 {
    &:nth-child(#{$i}) {
      margin-left: calc(#{$i} * 46px);
    }
  }

Answer 3

用div查看：

div {
  margin-left: 46px
}

<div>test
  <div>test
    <div>test
      <div>test</div>
    </div>
  </div>
</div>

或者，使用 jQuery。

var margin=0;
$("div").each(function(){
  $(this).css("margin-left",margin+=46)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>

Answer 4

hack

... 它不是特别灵活，但它似乎适用于这个特定的示例，并且副作用最小。

这个想法是使用具有自定义计数器样式的计数器，在每个元素前面添加越来越多的不可见文本。如果您想查看用于模拟缩进的文本，请删除

color: transparent;

。

@counter-style dots {
  symbols: '.';
}

:root {
  counter-reset: indent;
}

div {
  counter-increment: indent;
}

div::before {
  content: counter(indent, dots);
  color: transparent;
  user-select: none;
}

<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>

您可以通过更改不可见文本的字体大小或在

@custom-style

中使用不同的字符（或更长的字符串）来调整缩进宽度，例如“-”或“---”。

我还加入了

user-select: none;

以避免干扰复制粘贴操作。可能需要进一步修改才能与屏幕阅读器和其他情况良好配合，但这就是我自己的进步......

提醒：这是一个 hack，并且有很大的限制，请参阅其他答案，使用 Javascript 或元素嵌套更合理和更强大的方法。