Как заставить sass map-get вернуть полное комбинированное выражение

Question

У меня есть объект scss, подобный этому

$device-media-queries: (
  mobile: (max-width: 639px),
  tablet: (max-width: 1024px) and (min-width: 640px),
  desktop: (min-width: 1025px)
);

, который я использую map-get в миксине, подобном

$target-device-media-query: map-get($device-media-queries, $device-description);

Однако, в случае $device-descriptiontablet, $target-device-media-query становится только последним элементом в предложении, в данном случае (min-width: 640px).

Как сделать $target-device-media-query равным обоим выражениям, поэтому: (max-width: 1024px) and (min-width: 640px), чтобы мой медиазапрос не был испорчен, а стили планшета также не применялись к настольному устройству (из-зана (min-width: 640px) применение)? Когда я делаю комбинированный медиа-запрос напрямую, без использования mixin, все работает нормально.

Answer 1

Проблема в том, что ( и ) являются разделителями sass map. Вы должны использовать кавычки вокруг каждого медиа-запроса:

$device-media-queries: (
  mobile: '(max-width: 639px)',
  tablet: '(max-width: 1024px) and (min-width: 640px)',
  desktop: '(min-width: 1025px)'
);

@media #{map-get($device-media-queries, tablet)} { }

Answer 2

Вы должны использовать двойные кавычки, как показано ниже:

$device-media-queries: (
  mobile: "(max-width: 639px)",
  tablet: "(max-width: 1024px) and (min-width: 640px)",
  desktop: "(min-width: 1025px)"
);

$target-device-media-query: map-get($device-media-queries, tablet);

@media #{$target-device-media-query} {
  .element:before {
    content: $target-device-media-query;
  }
}