为 LESS 中的 child 个节点乘以 css 值

Question

我有类如下所示

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

我想为每个 child 类似的东西增加填充填充：(n*10)px

如何获得这个，因为我有不同数量的 child 项，并且我想为每个 child 项增加填充

在此先感谢您的帮助

Answer 1

您可以用 @ 定义一个常量变量，并将其乘以 n 数字，以防您需要指定特定的 child 类这样做：

@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;
}

如果你想将它应用到所有 children 你可以使用 * 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;
}

为 LESS 中的 child 个节点乘以 css 值

Multiply css value for child nodes in LESS

css

less