New `btwn-*-and-*` alias for mq()
Added new btwn-*-and-*
alias for mq()
mixin.
Examples
Now you can add "between queries" with mq()
:
@include mq('btwn-sm-and-md') {
…
}
You can use it with any object, component, and utility mixins:
@include u-margin('horizontal-auto', auto, 'btwn-sm-and-md');
@include u-padding('horizontal-md', $gutter-md, 'btwn-sm-and-md');
@include u-color('red-1', $color-red-1, 'btwn-sm-and-md');
That will generate styles like this:
@media all and (min-width: 30em) and (max-width: 48em) {
.u-margin-horizontal-auto\@btwn-sm-and-md { … }
.u-padding-horizontal-md\@btwn-sm-and-md { … }
.u-color-red-1\@btwn-sm-and-md { … }
}
Which can be used to add responsive styles in markup like this:
<div class="u-margin-horizontal-auto@btwn-sm-and-md / u-padding-horizontal-md@btwn-sm-and-md">
<span class="u-color-red-1@btwn-sm-and-md">…</span>
</div>
More Details
See CHANGELOG for more details.