如何制作 sass map-get return 完整的组合表达式

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) and (min-width: 640px) 这样我的媒体查询就不会搞砸，平板电脑样式也不会应用于桌面设备（由于 (min-width: 640px) 申请）？当我不使用 mixin 直接执行组合媒体查询时，一切正常。

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

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

如何制作 sass map-get return 完整的组合表达式

How to make sass map-get return full combined expression

css

sass

media-queries

scss-mixins