Less “设置”；“最小宽度”；或；“最大宽度”；在向mixin传递参数的媒体查询中

我想在一个更少的MediaQuery中定义的属性中使用动态最小/最大后缀

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

@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}-宽度：100px

是正确的语法，不允许在Mediaquery定义中应用等效值，但我需要在媒体查询中设置“最大宽度”值和其他“最小宽度”值。如何获得该值？

选项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时（使用上述任一选项）：

它将编译成以下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;
    }
}

---

是的，这可能是一个解决方案，但我认为可以使用类似

@{…}

或~“…”等机制以更紧凑的方式获得相同的结果。。。所以其中一个“语法解决方法”经常解决这样的问题。。。我希望更少的团队能够使我的原始语法迟早成为可能，它显然更简洁、更直观。我认为这是不可能的。但也许可以把问题留着，看看是否有更好的答案。我也会试试看。@LucaDetomi:我站起来，伙计。完全有可能以更紧凑的方式实现它。请参考我答案中的选项1。太好了！！！！！只有一件事，我认为使用

~

会导致“字符串按原样打印”，并且

@{min max}-width

不会被解释。。。。你能给我解释一下为什么这个正确运行吗？谢谢。是的，通常它会按原样打印字符串，但是当我们使用

@{var}

语法时，它会打印相应变量的值。

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