A function that allows to have one-liners for several values of one property mapped to different media queries (widths).
// @include u-responsive-value(margin-top, (small:18px, medium:25px, large:29px, xlarge:40px));
// dependencies: $mq
@mixin u-responsive-value($property, $values-map) {
@if type-of($values-map) == 'map' {
@each $mq, $value in $values-map {
@if map-has-key($mq-breakpoints, $mq) {
@if $mq == small {
#{$property}:$value;
} @else {
@include mq($from: $mq) {
#{$property}:$value;
}
}
}
}
}
}