Медиа-запрос и оператор if else в LESS - PullRequest
Новая
       5

Медиа-запрос и оператор if else в LESS

0 голосов
/ 26 ноября 2018

В Sass я так быстро реагировал.Но как я могу написать это в МЕНЬШЕ.Я нахожу способ, которым они используют, но я все еще не могу написать это правильно в 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
  }
}

1 Ответ

0 голосов
/ 26 ноября 2018

Вы можете использовать css guard .
Меньше 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;
  }
}

Кодовая демонстрация .

...