使用Less，我可以使用@media部分中的当前值吗？

Question

我有以下少量代码：

@appbar-padding: 10px;

.container {
  padding-bottom: @appbar-padding + 10;
}

@media (min-width: 750px) {
    .container {
      padding-bottom: @appbar-padding + 20;
    }
}

是否可以在padding-bottom部分中获取@media的当前值？所以我可以这样做：

@media (min-width: 750px) {
    .container {
        padding-bottom: @this + 10;
    }
}

这样，如果我将“正常”.container规则更改为@appbar-padding + 20，则大于750px宽的屏幕规则实际上会@appbar-padding + 30而不是+ 20 float: left。

Answer 1

正如Harry所说，你必须通过一个中间变量。代码示例可以是：

@appbar-padding: 10px;

@default-padding:@appbar-padding + 10;

.container {
  padding-bottom: @default-padding;
}

@media (min-width: 750px) {
    .container {
      padding-bottom: @default-padding + 20;
    }
}

我们的想法是预先定义＆＃34; 默认＆＃34; （您所谓的＆＃34;正常＆＃34;）填充值，从@appbar-padding开始计算，然后将其应用于.container。

在媒体查询中，此＆＃34; 默认＆＃34;价值是你再次改变的。通过这种方式，您可以模拟您想要的行为。

注意：由于scope，您必须在@default-padding:@appbar-padding + 10;类定义之外声明.container。