Skip to content

New `btwn-*-and-*` alias for mq()

Compare
Choose a tag to compare
@tannerhodges tannerhodges released this 31 May 13:47
· 173 commits to master since this release

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.