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

Кажется, я не могу заставить свою логику сопоставления 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;
  }
}

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

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

css less

20.02.2019 22:17

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

156

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

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

Да, это работает! Не уверен, почему это должно быть переменной интерполяцией, но полезно знать. Спасибо!

— 20.02.2019 22:52

@soulshined, проблема в том, что я сам этого не понимаю - я просто случайно обнаружил, что в данном случае это работает.

— 21.02.2019 09:32

20.02.2019 22:37

Ответ принят как подходящий

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

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

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

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

Released v3.5.0

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

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

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

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

Спасибо за объяснение и решение.

— 21.02.2019 13:52

20.02.2019 23:40