如何使 sass map-get 返回完整的组合表达式答案

【问题标题】：How to make sass map-get return full combined expression如何使 sass map-get 返回完整的组合表达式
【发布时间】：2020-02-13 15:54:44
【问题描述】：

我有一个这样的 scss 对象

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

我在像这样的 mixin 中使用map-get

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

但是，在$device-description 为tablet 的情况下，$target-device-media-query 仅成为子句中的最后一项，在这种情况下为(min-width: 640px)。

我如何使$target-device-media-query 等于两个表达式，所以：(max-width: 1024px) and (min-width: 640px) 这样我的媒体查询就不会搞砸，平板电脑样式也不会应用于桌面设备（由于 @987654330 @申请）？当我不使用 mixin 直接进行组合媒体查询时，一切正常。

【问题讨论】：

标签： css sass media-queries scss-mixins

【解决方案1】：

你应该使用如下双引号：

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

【讨论】：

【解决方案2】：

这里的问题是 ( 和 ) 是 sass 映射分隔符。您应该在每个媒体查询周围使用引号：

$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)} { }

【讨论】：