Question

我有一个班级.card，其中包含很多的绝对定位元素。

.card {
    height: 400px;
    width: 200px;

    .name {
        position:absolute;
        left: 34px;
    }
}

现在我想为.card

轻松创建许多不同的尺寸

像

.card.xs {
    .createSizedCard(0.5);
}

.createSizedCard(@factor){
    height: 400px * factor;
    width: 200px * @factor;
    // etc
}

因此。这显然只是一个例子，我的实际CSS包括更多的类。问题是：我可以在@inherited mixin中使用类似.createSizedCard的内容，而不必再次声明我的值吗？

我知道我可以使用变量，但我想避免这种情况。

或者：我可以使用其他类的具体值吗？像

height: .card[height] * @factor;

Answer 1

不，您不能从其他类继承属性值并使用它。但是您可以将.card类的默认属性（及其计算逻辑）设置为规则集或mixin，如下面的代码段所示并调用它。使用包装混合也可以做到这一点。

以下是规则集版本，其中height，width和factor在调用规则集之前在调用者的范围内设置。

@card: {
  height: @height * @factor;
  width: @width * @factor;
};

.card{
  @factor: 1;
  @height: 400px;
  @width: 200px;
  @card();
  &.xs{
    @factor: 0.5;
    @card();
  }
  &.lg{
    @factor: 2;
    @card();
  }
}

以下是如何完成的mixin版本。它与规则集版本非常相似，只是它可以直接获取输入参数。

.card(@factor) {
  height: @height * @factor;
  width: @width * @factor;
};
.card{
  @height: 400px;
  @width: 200px;
  .card(1);
  &.xs{
    .card(0.5);
  }
  &.lg{
    .card(2);
  }
}

以上编译时会产生以下CSS：

.card {
  height: 400px;
  width: 200px;
}
.card.xs {
  height: 200px;
  width: 100px;
}
.card.lg {
  height: 800px;
  width: 400px;
}

或者，如果因子是常数并且所有卡元素都需要适用于所有尺寸的规则，那么您可以创建一个如下所示的mixin：

.generate-card(@height; @width) {
  height: @height;
  width: @width;
  &.xs{
    height: @height * 0.5;
    width: @width * 0.5;
  }
  &.lg{
    height: @height * 2;
    width: @width * 2;
  }
}

.card {
  .generate-card(400px; 200px);
}
.card-2 {
  .generate-card(450px; 150px);
}

我可以在Less中使用继承的值吗？

1 个答案: