css - 如何使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-description为tablet的情况下，$target-device-media-query仅成为最后一项在子句中，在本例中为 (min-width: 640px)。

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

Answer 1

这里的问题是 ( 和 ) 是 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)} { }