将LESS中的子节点的css值相乘

Question

我有类似下面的课程

.item-1{
  .child-item-1 {
     .child-item-2 {
    }
  }
}

我想为每个孩子增加这样的填充   填充：（n * 10）px

我怎样才能得到这个，因为我有不同数量的子项目，并且每个子项目我想增加填充

提前感谢您的帮助

Answer 1

您可以使用@定义常量变量，并将其乘以n数字，以防您需要指定需要执行的特定子类：

@default-padding: 5px;

.item-1{
  padding: @default-padding;
  .child-item-1 {
      padding: @default-padding*10;
     .child-item-2 {
       padding: @default-padding*100;
    }
  }
}

编译为：

.item-1 {
  padding: 5px;
}
.item-1 .child-item-1 {
  padding: 50px;
}
.item-1 .child-item-1 .child-item-2 {
  padding: 500px;
}

如果你想将它应用于所有孩子，你可以使用* CSS选择器，如：

@default-padding: 5px;

.item-1{
  padding: @default-padding;
  & > * {
      padding: @default-padding*10;
     & > * {
       padding: @default-padding*100;
    }
  }
}

编译为：

.item-1 {
  padding: 5px;
}
.item-1 > * {
  padding: 50px;
}
.item-1 > * > * {
  padding: 500px;
}