使用 SASS CSS 为嵌套子级动态添加填充

【问题标题】：Dynamically add padding to nested children using SASS CSS使用 SASS CSS 为嵌套子级动态添加填充
【发布时间】：2018-04-22 22:23:51
【问题描述】：

我正在尝试制作目录树。它将动态生成嵌套子级。例如这里的 HTML

    <ul>
    <li>
        <div>test</div>
        <span>
            <ul>
                <li>
                    <div>test1</div>
                    <span>
                        <ul>
                            <li>
                                <div>test 2</div>
                                <span>
                                </span>
                            </li>
                            <li> test2</li>
                        </ul>
                    </span>
                </li>
            </ul>
        </span>
    </li>
</ul>

如何向其中添加 SASS CSS，即为每个嵌套的 LI 子级添加 20px。对于第一级 20，第二级 40 等等.. 我正在尝试直接向每个 LI 添加填充，但这基本上将整个元素移动到左侧，我想保持 div 为全宽，所以我可以提供一个完整的宽度底部边框，只需使用填充移动其中的内容。

CodePen Link

这个做我想要的，但它不是动态的。

我在这里创建了一个 JSFiddle 链接。 https://jsfiddle.net/h7pbmsh1/1/

【问题讨论】：

请分享css代码。
看看stackoverflow.com/questions/18927837/…
@MarioJuniorTorresPerez 给你jsfiddle.net/h7pbmsh1/1

标签： html css sass

【解决方案1】：

听起来您希望像这样链接 child combinator (>)：

ul > li > ul > li {
  padding-left: 3em;
}

这样，选择器不会针对初始的 Main <li> 元素，而是会针对属于这些顶级 <li> 元素的每个 <li> 元素，可以看出 here.

请注意，以上是“原始”CSS 输出。如果你特别想用 SASS 来做，你可以通过将子组合器放在新行的开头，在内部选择器之前来使用它：

ul {
  > li {
    > ul {
      > li {
        padding-left: 3em;
      }
    }
  }
}

SASS特有的方法可见here。

希望这会有所帮助！ :)

【讨论】：