嵌套填充更少

Question

我正在尝试为位于嵌套 ul li 结构内的按钮创建缩进。

我无法更改 HTML，因为它是由第三方系统呈现的。

HTML

    <ul>
       <li><button>Parent</button>
           <ul>
            <li>
              <button> Child</button>
                 <li><button>Parent</button>
                   <ul>
                    <li>
                     <button> Sibling etc</button>
                    </li>
                  </ul>
               </li>
             </li>
           </ul>
         </li>
      </ul>

ul 和 li 没有边距或填充，所以我们的想法是简单地向按钮元素添加填充。

问题是，由于 ul 没有 margin/padding，所有按钮都从完全相同的点开始，并且那里（无论它们嵌套多深）都具有完全相同的缩进。

少

    ul{
    li{
      button{
        padding-left: 25px;
      }
      ul{
        li{
          button{
            padding-left: 35px;
          }
        }
      }
    }
  }

我想过做类似上面的事情（并考虑尽可能多的级别）但是维护起来会是一场噩梦。

肯定有更优雅的方法来处理这个，想法？

Answer 1

~~我不知道你为什么要为此写一个 mixin。~~

~~我在 LESS 中的解决方案：~~

ul ul button {
    padding-left: 25px;
}
ul ul ul button {
   padding-left: 35px;
}

~~这样能解决您的问题吗？结果 CSS 看起来像这样：~~

ul ul button {
    padding-left: 25px;
}
ul ul ul button {
    padding-left: 35px;
}

好吧，所以我想到了一个不同的解决方案并查看了 LESS 文档，但潜在的问题是您显然无法事先知道发挥作用的嵌套级别数。

因此你必须等待 HTML 被渲染，然后读出嵌套级别（例如 5 级）并基于它你可以生成 CSS，我恐怕没有多大意义，需要在 JavaScript.

中完成

综上所述，您可以使用一些变量来简化您在 LESS 中的写作过程，但仅此而已。举个例子：

@padding: 25px;
@addten: 10px;
@selector: ul button;

@selector { @padding; }
ul @selector { @padding + @addten; }
ul ul @selector { @padding + @addten*2; }
ul ul ul @selector { @padding + @addten*3; }

也许您还可以为此创建一个混音以添加另一层抽象，但正如我所说，我不会走这么远。

希望这对您有所帮助。 =)

嵌套填充更少

Nested padding LESS

nested

button

padding

html-lists

less