How to make sass map-get return full combined expression

34
October 17, 2019, at 10:30 AM

I have an scss object like this

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

that I am using map-get on in a mixin like

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

However, in the case of $device-description being tablet, $target-device-media-query only becomes the last item in the clause, which in this case is (min-width: 640px).

How do I make $target-device-media-query equal to both the expressions, so: (max-width: 1024px) and (min-width: 640px) so that my media query doesn't get screwed up and tablet styles wouldn't also be apply to a desktop device (due to (min-width: 640px) applying)? When I do the combined media query directly without using a mixin, things work fine.

Answer 1

The problem here is that ( and ) are sass map delimiters. You should use quotation marks around each media-query:

$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

You should use double-quotes as below :

$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;
  }
}
READ ALSO
I want to create dropdown sidebar menu using typescipts. How can I do?

I want to create dropdown sidebar menu using typescipts. How can I do?

Here, I have attached urlsimilar way I want to create dropdown side bar menu but here I want to do using typescript

37
How to divide one row in various?

How to divide one row in various?

I have a column data in a postgresql table that receive data like this: |A|C|F|L|T|U|

38
Making div element dynamic with another function

Making div element dynamic with another function

I have a block of code that I want to try and refactor

27