Как интерполировать значение карты со строкой в ​​Less - PullRequest
Новая
       5

Как интерполировать значение карты со строкой в ​​Less

0 голосов
/ 21 февраля 2019

Кажется, я не могу заставить мою LESS маппинговую логику работать.Я следовал документации по отображению. 

@screen-size-min: {
  mobile-small: 320px;
  mobile-large: 480px;
  tablet-small: 600px;
  tablet-large: 768px;
  desktop-small: 992px;
  desktop-large: 1280px;
}

@min: min-width;

@desktop-small-min: ~"only screen and (@{min}: @screen-size-min[desktop-small])";

p {
  color: blue;

  @media @desktop-small-min {
    color: red;
  }
}

Я ожидаю, что этот код скомпилируется в css, но медиа-запрос не компилируется. 

p {
  color: blue;
}

@media only screen and (min-width: 992px) {
  p {
    color: red;
  }
}

Я пытался протестировать его на lesstester , но в настоящее время он поддерживает только LESS 2.7.Карты - это новая функция в LESS 3.5

Нет ошибок компиляции.Где я ошибся?

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Это происходит потому, что key[value] на самом деле не является переменной, переменная является картой @screen-size-min, поэтому вы не можете воспользоваться преимуществом интерполяции переменных.Одно из решений состоит в том, чтобы просто объединить KVP с остальной частью строки: 

@desktop-small-min: ~"only screen and (@{min}:" @screen-size-min[desktop-small] ~ ")";

Это исключает любую зависимость от создания другой переменной просто для ее интерполяции

Кроме того,согласно их документации, были введены карты:

Выпущен v3.5.0

И тестер, который вы тестировали только с поддержкой 2.7

Codepen обычно поддерживает свои последние версии.Вот анонимное перо, демонстрирующее:

https://codepen.io/anon/pen/zeXmev

Если вы нажмете на маленькую стрелку вниз рядом с заголовком «CSS (Меньше)», вы можете выбрать «Просмотр скомпилированного CSS» и онпокажет вам МЕНЬШЕ -> CSS выход

0 голосов
/ 21 февраля 2019

Кажется, это работает: 

@screen-size-min: {
  mobile-small: 320px;
  mobile-large: 480px;
  tablet-small: 600px;
  tablet-large: 768px;
  desktop-small: 992px;
  desktop-large: 1280px;
}

@min: min-width;
@mysize: @screen-size-min[desktop-small];

@desktop-small-min: ~"only screen and (@{min}: @{mysize})";

p {
  color: blue;

  @media @desktop-small-min {
    color: red;
  }
}

Дает желаемый результат.Попробуйте здесь

...