Less Port of Bootstrap 4s Media Query Mixins

1.README.md

Less Port of Bootstrap 4s Media Query Mixins

See http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints.

Ports Bootstrap 4's _breakpoints.scss to Less.

Tested with less2css.org. View the working test.

Usage

& {
  .media-breakpoint-up(md; {
    .some-class {
      display: block;
    }
  });
}
// OR
.some-class {
  .media-breakpoint-up(md; {
    display: block;
  });
}

The same pattern works for the other mixins.

2._variables.less

//
// Variables
//

@grid-breakpoints: xs 0, sm 544px, md 768px, lg 992px, xl 1200px;

3._breakpoints.less

// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a list of `name minimum-width`, ordered from small to large:
//
//    xs 0, sm 544px, md 768px
//
// The list defined in the `@grid-breakpoints` global variable is used as the `@breakpoints` argument by default.

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
.media-breakpoint-up(@name; @breakpoints; @content) {
  .-(@i:length(@breakpoints)) when (@i > 0) {
    .-((@i - 1));
    
    @breakpoint:       extract(@breakpoints, @i);
    @breakpoint-name:  extract(@breakpoint, 1);
    
    & when (@name = @breakpoint-name) { // if it's the specified size
      @breakpoint-value: abs(extract(@breakpoint, 2));
      
      & when (@breakpoint-value = 0) {
        @content();
      }
      & when (@breakpoint-value > 0) {
        @media (min-width: @breakpoint-value) {
          @content();
        }
      }
    }
  }.-();
}
.media-breakpoint-up(@name; @content) { .media-breakpoint-up(@name; @grid-breakpoints; @content); }  // default breakpoints alias

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
.media-breakpoint-down(@name; @breakpoints; @content) {
  .-(@i:length(@breakpoints)) when (@i > 0) {
    .-((@i - 1));
    
    @breakpoint:       extract(@breakpoints, @i);
    @breakpoint-name:  extract(@breakpoint, 1);
    
    & when (@name = @breakpoint-name) { // if it's the specified size
      & when (@i = length(@breakpoints)) {
        @content();
      }
      & when (@i < length(@breakpoints)) {
        @next-breakpoint:       extract(@breakpoints, (@i + 1));
        @next-breakpoint-value: abs(extract(@next-breakpoint, 2));
        
        @media (max-width: (@next-breakpoint-value - 1)) {
          @content();
        }
      }
    }
  }.-();
}
.media-breakpoint-down(@name; @content) { .media-breakpoint-down(@name; @grid-breakpoints; @content); }  // default breakpoints alias

// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
.media-breakpoint-only(@name; @breakpoints; @content) {
  .media-breakpoint-up(@name; @breakpoints; {
    .media-breakpoint-down(@name; @breakpoints; {
      @content();
    });
  });
}
.media-breakpoint-only(@name; @content) { .media-breakpoint-only(@name; @grid-breakpoints; @content); } // default breakpoints alias

// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
.media-breakpoint-between(@lower; @upper; @breakpoints; @content) {
  .media-breakpoint-up(@lower; @breakpoints; {
    .media-breakpoint-down(@upper; @breakpoints; {
      @content();
    });
  });
}
.media-breakpoint-between(@lower; @upper; @content) { .media-breakpoint-between(@lower; @upper; @grid-breakpoints; @content); } // default breakpoints alias