Multiply css value for child nodes in LESS - css

Question

I have classes like below
.item-1{
.child-item-1 {
.child-item-2 {
}
}
}
I want to increase padding for each child something like that
padding: (n*10)px
How can I get this as I have varied number of child items and for each child item I want to increase padding
Thanks in advance for help

Answer 1

You can define a constant variable with # and just multiply it for the n number, in case you need to specify specific child classes you need to do like this:
#default-padding: 5px;
.item-1{
padding: #default-padding;
.child-item-1 {
padding: #default-padding*10;
.child-item-2 {
padding: #default-padding*100;
}
}
}
Compiles to:
.item-1 {
padding: 5px;
}
.item-1 .child-item-1 {
padding: 50px;
}
.item-1 .child-item-1 .child-item-2 {
padding: 500px;
}
If you want to apply it to all the childrens you can use * CSS selector like:
#default-padding: 5px;
.item-1{
padding: #default-padding;
& > * {
padding: #default-padding*10;
& > * {
padding: #default-padding*100;
}
}
}
Compiles to:
.item-1 {
padding: 5px;
}
.item-1 > * {
padding: 50px;
}
.item-1 > * > * {
padding: 500px;
}