After some discussion and percolation I think we have the major features and workflow of Breakpoint 2.0 worked out.

Breakpoint 2

Breakpoint 2 will add full media query handling, including only, not, and or operators, along with making working with breakpoint variables simpler and more robust.

Example breakpoint variables:

// A normal example:
$mq: screen 'and' min-width 30em;
// An intense example:
$mq: only screen 'and' width 20em 35em 'and' monochrome 
        'and' max-height 20em, print;

Feature list types

• All original breakpoint combinations:
  • 500px // default-feature-value
  • min-height 500px // feature value
  • width 20em 30em // feature min-value max-value
• Media type, with optional not or only operators.
  • screen // media-type
  • 'only' screen // operator media-type
• No-query is now treated like any other breakpoint feature list:
  • no-query '.nq' // no-query-flag selector

And and Or operators

In V2, and operators will use the keyword 'and', while or operators will use a comma.

Prefixed features

To be decided. Maybe keyword handling, maybe array handling, although both have unique complexity issues.

Combination of multiple breakpoint variables

The following should be possible:

$medium: 20em;
$max-medium: max-width 35em 
$medium-scoped: $medium 'and' $max-medium;
$low-color: monotone;

@include breakpoint($medium-scoped 'and' $low-color)  {
  ...
}

Variable arguments

By switching to keywords and internal handling instead of separate arguments, we can use variable arguments in the mixin and streamline ux.

Context

Now that we are allowing or media queries, context will have to return a list, sorted from smallest to largest value.

@include breakpoint(500px 200px 'and' resolution 2dppx) {
  // bp_context(min-width) == (200px, 500px).
}

Warnings

We should throw warnings on some possible user errors:

• More than one media type in an and query
• More than one instance of a feature in an and query

Thoughts, problems, suggestions? @Snugug, want to make a canonical v2 branch and divide some of these features to work on?

Since breakpoints happen in base ems, but layouts happen in local ems, this function should be able to convert em-values as well. That requires a font-size argument. This function is otherwise identical to Susy's. Why was the font-size conversion removed?

At the first run of breakpoint I'm getting the following error:

 Invalid CSS after "  @media ": expected "{", was "#{$query} {"

I'm compiling with Codekit with breakpoint installed as a partial.

Anychance that someone could help with this issue here: http://stackoverflow.com/questions/24963153/breakpoint-in-rails-app about getting Breakpoint to work without Compass?

Thanks, Neil

I have previously written my own mixins for breakpoints and had a similar solution for no query support where I would pass true or false to the mixin and that would decide whether or not that content was in included in the no-query/old-ie stylesheet.

I have got this mostly working with breakpoint, except there doesn't seem to be a way to store the $no-query variable in a breakpoint variable.

eg.

$gte-medium: 35em, all, true

That way I don't need to continuously write:

@include breakpoint($gte-medium, $no-query: true)

every time I have something at the medium breakpoint I can just write:

@include breakpoint($gte-medium)

It allows me to set all my breakpoints(with no query specificity) in my settings file incase I decide to change it or when I am working with other developers that don't know what styles should go to old ie etc they can just use the default breakpoint variables without worrying about it.

Is this possible at the moment? Am I missing something?

Thanks, Luke

When adopting a mobile-first approach, it is important to provide desktop styles to old versions of IE that do not support media queries. This has previously been achieved without @media bubbling in Sass. Please read this article by Jake Archibald, in which he demonstrates a new method that allows the creation of an IE only stylesheet whilst simultaneously using @media bubbling.

This commit adopts this method, but rather than using the variable name of $fix-mqs, it instead uses $fix-breakpoint. I'm not completely familiar with the ins and outs of the Breakpoint library, but I have tried my best to incorporate here.

Breakpoint Get Context for 2.x.x gets more complicated with the addition of built-in 'or' query support. As a developer, I'd like the following returned to me from a breakpoint get context query:

$bkpt: 300px, ('min-height' 600px) (orientation landscape), 'min-height' 900px;

#foo {
  @include breakpoint($bkpt) {
    $min-width: breakpoint-get-context('min-width');
    $min-height: breakpoint-get-context('min-height');
    $orientation: breakpoint-get-context('orientation');

    @debug $min-width;
    @debug $min-height;
    @debug $orientation;
  }
}

min-width: 300px, false, false
min-height: false, 600px, 900px
orientation: false, landscape, false

I would be okay with trailing falses no being present, but would like to see a companion function to make all lists the same length, padded with false. I would like this because I need to be able to have all of my lists the same length to programmatically work with them and ensure that ors properly line up with their functionality.

When writing @include breakpoint(800px), breakpoint returns @media and (min-width: 800px)

I presume this may be a compiler issue, because I have used Breakpoint in another project where I was compiling with Codekit (and it worked). This time I’m compiling with Gulp (gulp-sass).

I have Sass 3.3.4 installed.

Thoughts?

Updated the min/max functionality to be able to be used with any valid value, not just min-width. Also added in handling for prefixing device-pixel-ratio media query. Also added ability for single feature/value pairs to be written with feature first or second. Finally, converted from Sass to SCSS.

.foo {
  @include breakpoint(300px 400px) {
    content: 'foo';
  }
}

.bar {
  @include breakpoint(300px 400px 'height') {
    content: 'bar';
  }
}

.baz {
  @include breakpoint(1 1.5 'device-pixel-ratio') {
    content: 'baz';
  }
}

Becomes

@media screen and (min-width: 300px) and (max-width: 400px) {
  .foo {
    content: 'foo';
  }
}

@media screen and (min-height: 300px) and (max-height: 400px) {
  .bar {
    content: 'bar';
  }
}

@media screen and (min-device-pixel-ratio: 1) and (max-device-pixel-ratio: 1.5) {
  .baz {
    content: 'baz';
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1.5) {
  .baz {
    content: 'baz';
  }
}

@media screen and (min--moz-device-pixel-ratio: 1) and (max--moz-device-pixel-ratio: 1.5) {
  .baz {
    content: 'baz';
  }
}

@media screen and (-o-min-device-pixel-ratio: 1/1) and (-o-max-device-pixel-ratio: 3/2) {
  .baz {
    content: 'baz';
  }
}

TODO: Need to be able to write min/max in either order, but that can be written off to API constraints.

Why am I getting this error?

line 47 looks like this:

$private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global;

full stack trace has been concatenated I'm afraid. might be able to get something. Is !global valid?

I see that Compass is not required for compiling breakpoint's CSS. https://github.com/Team-Sass/breakpoint/issues/46

Would it be acceptable to remove the gem dependency on Compass, using Compass::Frameworks.register if compass is available, falling back to Sass.load_paths? An example implementation is in bootstrap-sass: https://github.com/twbs/bootstrap-sass/blob/master/lib/bootstrap-sass.rb

Media Queries Level 4

@media (hover: none) { // look mom! i might be a touch device }

how would I write the query above in the current form?

when i do

@import breakpoint($phone) { }

and $phone: (hover none); or hover: 'none' or etc etc down the list, nothing is currently working....

In Breakpoint 2.6 you changed die default variables from sass-variables to a sass-map called $breakpoint-settings. it is very difficult to override sass map variables (only with a roudtrip), see: https://getbaseweb.com/blog/2017/03/07/overriding-variable-maps-with-sass/ for example: $breakpoint-no-query-fallbacks: true; or $breakpoint-to-ems: true; is not possible, the documentation is wrong and depracated please switch back to normal sass variables or provide an other way to override the default variables

Hey, first up, this thing is awesome. Thank you guys for creating it.

Now, my question: could you could provide documentation for eyeglass usage somewhere, even something simple like what modularscale does:

Eyeglass

• Terminal: npm install modularscale-sass --save-dev
• SCSS: @import 'modular-scale'

(I'm just asking, because I spent 15-20 minutes poking around before I realized the @import name was just "breakpoint", not "breakpoint-sass".)

Already with this sass eg.:

.foo {
  @include breakpoint($large) {
    color: #333;
  }
}
.bar {
  @include breakpoint($large) {
    display: none;
  }
}

compiles to css:

@media (min-width: 1200px) {
  .foo {
    color: #333;
  }
}
@media (min-width: 1200px) {
  .bar {
    display: none;
  }
}

So - can it be grouped and compiled to:

@media (min-width: 1200px) {
  .foo {
    color: #333;
  }
  .bar {
    display: none;
  }
}

It saves some css file size.

I have followed the instructions for installing breakpoint only to get the following error when I try do do compass watch:

Gem::ConflictError on line ["2285"] of C: Unable to activate breakpoint-2.4.6, because sass-3.4.23 conflicts with sass (~> 3.3.0)

I also would like to use the alternate method of installing breakpoint using bower, but this line really should be fully written out rather than expecting everyone to understand what the heck it means:

You are also going to need to add the folder using Compass's add_import_path config option instead of the standard require.

What folder and where does add_import go?