МЕНЬШЕ, как интерполировать значение карты со строкой

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

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

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

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

Выпущена версия 3.5.0

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

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

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

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

Это, кажется, работает:

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

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