我有一个像这样的 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 直接执行组合媒体查询时,一切正常。
最佳答案
这里的问题是 (
和 )
是 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)} { }
关于css - 如何使sass map-get返回完整的组合表达式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58420564/