Nested padding LESS - button

Question

I am trying to create indentation for buttons that sit inside of a nested ul li structure.
I can't change the HTML as it is being rendered by a third party system.
The 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>
The ul and li have no margin or padding so the idea was to simply add padding to the button elements.
The issue is, because of the ul having no margin/padding, the buttons all start from the exact same point and there (no matter how deep they are nested) all have the exact same indentation.
LESS
ul{
li{
button{
padding-left: 25px;
}
ul{
li{
button{
padding-left: 35px;
}
}
}
}
}
I thought of doing something like the above (and account for as many levels as possible) but it would be a nightmare to maintain.
Surely there is a more elegant way to handle this, thoughts?

Answer 1

I don't know why you would want to go as far as to write a mixin for this.
My solution in LESS:
ul ul button {
padding-left: 25px;
}
ul ul ul button {
padding-left: 35px;
}
Would that solve the problem for you?
The resulting CSS would look like this:
ul ul button {
padding-left: 25px;
}
ul ul ul button {
padding-left: 35px;
}
Alright, so I thought of a different solution and looked at the LESS documentation but the underlying problem is that you can't know the number of levels of nesting coming into play beforehand obviously.
Thus you would have to wait for the HTML to be rendered, then read out the level of nesting (e.g. 5 levels) and based on that you could generate the CSS, which I'm afraid wouldn't make much sense and is something to be done in JavaScript.
All of that being said you could use a few variables to ease your writing process in LESS but that's about it. Here for an example:
#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; }
Probably you could also create a mixin for that to add another layer of abstraction but like I said, I wouldn't go thus far.
Hope this helps. =)