less - 在将参数传递给 mixin 的媒体查询中设置“最小宽度”或“最大宽度”

Question

我想在 Less MediaQuery 中定义的属性中添加动态 MIN/MAX 后缀。

我写了这段代码，但它没有编译：

@screen-md: 800px;

.MEDIAQUERY(@min-max, @size) 
{
  @media screen and (@{min-max}-width: @size) 
  { 
    @{min-max}-width:100px;
  }
}

header 
{
  background-color: blue;

  .MEDIAQUERY ( @min-max: max, @size: @screen-md );
}

虽然@{min-max}-width:100px;是正确的语法，但不允许在 Mediaquery 定义中应用等效项，但我需要在我的媒体查询中设置“最大宽度”值和其他“最小宽度”值。如何获得这个？

Answer 1

选项 1：（使用变量和插值）

你可以像下面那样做

.MEDIAQUERY(@min-max, @size) {
      @mediaQuery: ~"screen and (@{min-max}-width: @{size})";
      @media @mediaQuery {
            @{min-max}-width:100px;
      }
}

---

选项 2：（使用警卫）

您可以使用下面的 mixin 中的守卫来检查为@min-max参数传递的值是什么，然后根据它输出适当的 CSS。

.MEDIAQUERY(@min-max, @size){
    & when (@min-max = min) {
        @media screen and (min-width: @size) {
            min-width:100px;
        }
    }
    & when (@min-max = max) {
        @media screen and (max-width: @size) {
            max-width:100px;
        }
    }
}

---

当上面的 mixin 被如下调用时（使用上面提到的任何一个选项）：

header 
{
  background-color: blue;
  .MEDIAQUERY ( @min-max: max, @size: @screen-md );
}

div{
  background-color: red;
  .MEDIAQUERY ( @min-max: min, @size: @screen-md );
}

它会编译成下面的 CSS：

header {
    background-color: blue;
}
@media screen and (max-width: 800px) {
    header {
        max-width: 100px;
    }
}
div {
    background-color: red;
}
@media screen and (min-width: 800px) {
    div {
        min-width: 100px;
    }
}