Breakpoint SCSS is a really powerful tool while developing websites. It makes handling media queries easier. However, it is not yet compatible with Libsass.

The main reason why I’ve started working with Libsass is that it is way more faster than Ruby Sass 3.3+. On my projects, Grunt with Sass 3.4 can take up to 11 seconds to compile, while Grunt with Libsass takes 1-2 seconds.

The main downside of this switch is that Libsass is not compatible with Breakpoint yet. As a matter of fact, Libsass is not spec-compliant with Sass 3.2 and it is missing some features of Sass 3.3+.

So, I’ve started backporting Breakpoint 2.x to Libsass. My aim is to create a simplified version of Breakpoint sharing the same API, so whenever Libsass implements the features needed by Breakpoint no code changes are needed.

This current implementation handles only the simplest use case.

Main function
@mixin breakpoint($query) {
  $query-string: breakpoint-parse-query($query);

  @media #{$query-string} {
    @content;
  }

  // Missing the no query fallbacks code
}
Helper function
@function breakpoint-parse-query($query) {
  $length: length($query);
  $mq: 'all ';

  // If it's a single number
  @if $length == 1 {
    @return $mq + 'and (min-width: ' + $query + ')';
  }

  // If we've got a string/number
  @if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'number') {
    @return $mq + 'and (' + nth($query, 1) + ': ' + nth($query, 2) + ')';
  }

  // If they're both numbers, we assume it's a double and roll with that
  @if (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'number') {
    @return $mq + 'and (min-width: ' + nth($query, 1) + ') and (max-width: ' + nth($query, 2) + ' )';
  }

  // Else assume is a list of properly formatted mq
  @each $single-query in $query {
    $mq: $mq + 'and (' + nth($query, 1) + ': ' + nth($query, 2) + ')';
  }
  @return $mq;
}

To use the above code, have a look at Breakpoint-sass project page or check out this code:

// assume min-width (by default) if only a number
$high-tide: 500px;
@include breakpoint($high-tide) {
  // ...
}

// set min-width/max-width if both values are numbers
$ex-presidents: 600px 800px;
@include breakpoint($ex-presidents) {
  // ...
}

// if one value is a string, assume a feature/value pair
$surfboard-width: max-width 1000px;
@include breakpoint($surfboard-width) {
  // ...
}

// string tests together within parentheses, assume each item is a feature value pair
$surfboard-height: (min-height 1000px) (orientation portrait);
@include breakpoint($surfboard-height) {
  // ...
}