Flexible resolution of media queries from responsive configuration keys

[FlyingDR]

As proposed into this comment it may be useful to allow passing map argument for $key argument that would be treated as local results of querying responsive configuration. For example:

@include r-font((desktop: 20px, md: 18px, sm: 18px, xs: 16px), text 400 $color-black);

As can be seen - this approach may be pretty convenient for values that are only used locally (e.g. not involved into any calculations).

However this approach does not solve requirement to use same value across multiple responsive configurations (#12).

Proposed solution is to utilize Sass ability to use non-scalar values as keys, hence it is possible to write something like:

@include r-font((desktop: 20px, md sm: 18px, xs: 16px), text 400 $color-black);

Notice md sm list as a key. Moreover it is possible to use even more complex constructions as keys, e.g. 320px 480px or even (min-width: 320px, max-width:480px) and it is still valid key value for Sass. Because of this it is possible to open huge possibilities for defining inline media query => value mappings with very compact syntax.

It is possible to go even further: media query resolution can be implemented in a form of configurable function that will receive expression as a key and respond with media query. Default implementation will resolve "standard" syntax, but if it will be configurable - it would open virtually endless possibilities.