Question

在Sass中，我像这样反应迟钝。但是我怎么用LESS写这个。我找到了他们使用的方式，但是我仍然无法在LESS中正确地编写它

html {
  /*font-size: 10px;*/

  font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%

  @include respond(tab-land) {
    font-size: 56.25%; //1 rem = 9px; 9px/16px = 56.25%
  }

  @include respond(tab-port) {
    font-size: 50%; //1 rem = 8px; 8px/16px = 50%
  }

  @include respond(big-desktop) {
    font-size: 75%; //1 rem = 12px; 10px/16px = 62.5%
  }
}


@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 37.5em) {@content} //600px
  }

  @if $breakpoint == tab-port {
    @media (max-width: 56.25em) {@content}  //900px
  }

  @if $breakpoint == tab-land {
    @media (max-width: 75em) {@content}  //1200px
  }

  @if $breakpoint == big-desktop {
    @media (min-width: 112.5em) {@content}  //1800
  }
}

Answer 1

您可以使用css guards。
更少的mixin：

.respond(@size, @content) {
  & when(@size = phone) {
    @media (max-width: 37.5em) { @content() }
  }
}

用法：

.a {
  .respond(phone, {
    color: red;
  });
  .respond(unknown, {
    color: green;
  });
}

编译为：

@media (max-width: 37.5em) {
  .a {
    color: red;
  }
}

Codepen demo。

媒体查询和LESS中的if else语句

1 个答案: