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定义中应用等效项，但我需要在媒体查询中设置某个时间的“max-width”值和其他“min-width”值。如何获得这个？

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

在将参数传递给mixin的媒体查询中设置“min-width”或“max-width”

1 个答案: