This works:

$thisbkpt: 500px, min-height 200px;
@include breakpoint($thisbkpt) {...}

But,

$thisbkpt: 500px;
@include breakpoint($thisbkpt, min-height 200px) {...}

and

@include breakpoint(500px, min-height 200px) {...}

fail with the error

Invalid CSS after "min-height ": expected media query list, was "200px and (min-...".

You must have sass version 3.2.7 at least or breakpoint wont work.

Can you add this to the wiki?

When using a fenced media query with shorthand syntax as well as a media type, two min-width queries get created instead of a min-width and a max-width query. Example:

@import "breakpoint";

$fenced: handheld 600px 980px;

.foo {
    width: 100%;
    @include breakpoint($fenced) {
        width: 20px;
    }
}

.foo {
  width: 100%;
}
@media handheld and (min-width: 600px) and (min-width: 980px) {
  .foo {
    width: 20px;
  }
}

Right now, our copyright for GPL just points to the general GPL license and not a specific version. @JohnAlbin had expressed to me at DrupalCon that he would like to include the Breakpoint code inside of Zen (not Zen Grids) but was wary to as it appears as if this is GPL3 licensed and he would need it GPL2 licensed. With this in mind, we generally need to clarify the copyright on this project.

Hi,
First let me say thanks for such a great GEM. It has made my life way easier in making responsive websites. With that said I am getting a strange error. When compass compiles my SCSS file into true CSS, it is adding in extra breakpoints.

Here is the SCSS code for my breakpoints:

// Breakpoints
$breakpoint-legacy-syntax: true;
$bp-starter: 0;
$bp-mobile: 0 540px;
$bp-tablet: 541px 740px;
$bp-small: 741px 1024px;
$bp-normal: 1025px;

My usage looks like this:

.container {
  // Desktop Columns
  @include breakpoint($bp-normal) {
    @include container;
    .sidebar-first-region {
      @include span-columns(5,18);
    }
    .sidebar-second-region {
      @include span-columns(5 omega,18);
    }
    // background-color: #f00;
  }
  // Tablet Columns
  @include breakpoint($bp-tablet) {
    @include container(12);
    .sidebar-first-region {
      @include span-columns(3,12);
    }
    .sidebar-second-region {
      @include span-columns(3 omega,12);
    }
    // background-color: #0f0;
  }
  // Mobile Columns
  @include breakpoint($bp-mobile) {
    @include container(8);
    .sidebar-first-region {
      @include span-columns(8 omega,8);
      display: block;
      float: none;
      clear: both;
    }
    .sidebar-second-region {
      @include span-columns(8 omega,8);
      display: block;
      float: none;
      clear: both;
    }
    // background-color: #00f;
  }

}

I am using SUSY to generate my grids for the site, so that is why there is the @include container and @include span-columns().

There generated CSS for the grid and breakpoints above is:

@media (min-width: 1025px) {
  .container {
    *zoom: 1;
    max-width: 1060px;
    _width: 1060px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto; }
  .container:after {
    content: "";
    display: table;
    clear: both; }
  .container .sidebar-first-region {
    width: 26.41509%;
    float: left;
    margin-right: 1.88679%;
    display: inline; }
  .container .sidebar-second-region {
    width: 26.41509%;
    float: right;
    margin-right: 0;
    *margin-left: -20px;
    display: inline; } }
@media (min-width: 541px) and (max-width: 740px) {
  .container .sidebar-first-region {
    width: 22.85714%;
    float: left;
    margin-right: 2.85714%;
    display: inline; }
  .container .sidebar-second-region {
    width: 22.85714%;
    float: right;
    margin-right: 0;
    *margin-left: -20px;
    display: inline; } }
@media (min-width: 541px) and (max-width: 740px) and (min-width: 700px) {
  .container {
    max-width: 700px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto; }
  .container:after {
    content: "";
    display: table;
    clear: both; } }
@media (min-width: 0) and (max-width: 540px) {
  .container .sidebar-first-region {
    width: 100%;
    float: right;
    margin-right: 0;
    *margin-left: -20px;
    display: inline;
    display: block;
    float: none;
    clear: both; }
  .container .sidebar-second-region {
    width: 100%;
    float: right;
    margin-right: 0;
    *margin-left: -20px;
    display: inline;
    display: block;
    float: none;
    clear: both; } }

As you can see by this line: @media (min-width: 541px) and (max-width: 740px) and (min-width: 700px), somehow there is an extra min-width added to the output that I have no clue where it is coming from. Just in case, here is a listing of my installed gems:

*** LOCAL GEMS ***

animate-sass (0.1.1)
breakpoint (2.0.6)
bundler (1.3.5)
ceaser-easing (0.7)
chunky_png (1.2.8)
compass (0.12.2)
compass-rgbapng (0.2.1)
fssm (0.2.10)
modular-scale (1.0.6)
rack (1.5.2)
rack-protection (1.5.0)
rake (10.1.0)
rb-fsevent (0.9.3)
rubygems-update (2.0.7)
sass (3.2.10)
sassy-buttons (0.2)
sassy-math (1.5)
sinatra (1.4.3)
susy (1.0.9)
tilt (1.4.1)
zocial (0.0.3)
zurb-foundation (4.3.1)

Thanks for your help in resolving this issue. If you need anymore information please let me know and I can provide it.

IE < 9 does not support media queries. Passing desktop styles to them might be necessary in many cases.

@mixin breakpoint($breakpoint, $ie-passthrough: false) {
  @meida $breakpoint {
    @content
  }

  // IE passthrough stuff
  @if $ie-passthrough == lt9 {
    .ie-lt-9 {
      @content
    }
  }
}

I am getting this series of errors when trying to create a compass project:

gavin@vps:~$ sudo compass create MY_PROJECT -r breakpoint
/usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require': no such file to load -- sass/script/node (LoadError)
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:2
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:1:in `each'
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:1
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions.rb:9
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/lib/compass.rb:5
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/lib/compass.rb:4:in `each'
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/lib/compass.rb:4
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
        from /usr/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/bin/compass:20
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/bin/compass:8:in `fallback_load_path'
        from /usr/lib/ruby/gems/1.8/gems/compass-0.12.2/bin/compass:19
        from /usr/bin/compass:19:in `load'
        from /usr/bin/compass:19

Any thoughts where I am going wrong here?

I see that in #35 you added the ability to combine multiple breakpoint variables into a single mixin call.

Is it possible for one of the variables to be a no-query variable ($no-queries: 890px, 'no-query' 'lt-ie9')?

This would allow me to simply add the variable to existing @include breakpoint():

.l-constraint {
  @include breakpoint($break-desktop, $no-queries) {
    width: 870px;
  }
}

Need to rewrite logic for DPR because Resolution isn't implemented in -webkit. See

http://www.w3.org/Style/CSS/Test/MediaQueries/20120229/reports/implement-report.html

I'm using the new No Query Support an it's working out great - Thank you for this recent update as it's so very useful.

Q: Let's say I need an specific style to appear at the end of my mobile first breakpoints. How do I use a wrapper that only targets my style sheet where $breakpoint-no-queries = true. I need to add (IE only) css that isn't dependent to a media query. In this case due to lack of inline-blocks for older IE's. I suppose I can make a breakpoint with a huge min-width check but that's hacky.

@include breakpoint (@breakpoint-medium, $no-query=true){
display:inline-block;
... other global styles to use everywhere .... 
}

@include breakpoint($no-query=true){
display: block
}

Obviously the latter function isn't happy without a $breakpoint variable. Do you have a suggestion for how to approach this use case?

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?

This may work well with breakpoint:

https://github.com/aaronjensen/sass-media_query_combiner
https://github.com/aaronjensen/sprockets-media_query_combiner

Would it be worth adding the the readme?

Removing the "all" media type by default, and then adding it back in with a settings variable is complex. Why not have "false" as an allowable default media type, which prints nothing, and let default media type "all" to print as you would expect?

When designing mobile-first, it is common practice to put all of the media queries together, rather than nested. This is so that we can serve all desktop browsers the desktop version of the site, regardless of their support for media queries.

On the other hand, having inline media queries and using the Breakpoint library is a massive bonus for code maintenance.

It would be nice to use the two, so I wonder whether the Breakpoint library could be expanded so that we still can write inline/nested media queries, but at the same time serve old IE the desktop version. For this, we need a separate file as Nicolas Gallagher writes about here.

Could Breakpoint generate us a stylesheet for each breakpoint? Of course, it is up to the author whether or not he/she uses this stylesheet, but for approaches like the one here, it would be very helpful.

Had an awesome talk with @jensimmons yesterday about Breakpoint and she pointed out that Respond.js won't work with our @media (feature: value) syntax, but will work with @media all and (feature: value) syntax, and she'd like to see the ability for users to force the all media type. I think that's fair enough, and is a fairly easy global variable to set, so I think we should put it in.

I'm going to work on this, but setting up an issue to reference.

Hi,

Im using a sass compiler based on node, that doesnt support Compass.
Is is possible to use Breakpoint without compass?

I've pulled the scss files to my project folder, but when i try to compile I get this error
Warning: css-src/libs/_breakpoint.scss:102: error: invalid media query

Being the respective scss:
// Print Out Query String
@if not $breakpoint-no-queries {
@media #{$query-string} {
@content;
}
}

There are times when you'd want to put in no-query directly w/o it being part of the variable. Let's add that ability back

(from http://stackoverflow.com/questions/17090191/import-breakpoint-throws-not-found-error/17090653?noredirect=1#comment24723128_17090653)

I was working on this project yesterday using Sass and Breakpoint and everything was fine. This morning however when I went to compile using sass --watch .. I am getting this error:

error ../sass/screen.scss (Line 6: File to import not found or unreadable: breakpoint. Load path: /Users/MOD3/Sites/GABE/stylesheets/stylesheets)

Get this warring with Sass 3.3 rc-1

DEPRECATION WARNING on line 131 of /var/lib/gems/1.9.1/gems/breakpoint-2.0.7/stylesheets/breakpoint/_context.scss:
Assigning to global variable "$private-breakpoint-context-holder" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$private-breakpoint-context-holder: () !global" instead.

Are there any plans on updating breakpoint so that this warring don't appear ?

So this is my input scss file, which is exactly same as the ones in the docs.

// create $breakpoint variables like so
// assume min-width (by default) if only a number
$breakpoint-medium-width: 500px;
$breakpoint-medium-width-em: 30em;

// set min-width/max-width if both values are numbers
$breakpoint-medium-not-wide: 500px 700px;

// set min/max of feature if there are two numbers
$breakpoint-medium-height: 300px 700px 'height';

// if one value is a string, assume a feature/value pair
$breakpoint-kind-of-wide: min-width 700px;
$breakpoint-not-too-wide: max-width 700px;

// for multidimensional lists, assume each item is a feature value pair
$breakpoint-wide-portrait: max-width 700px, orientation portrait;

// handle one-sided features (ie. monochrome)
$breakpoint-wide-portrait-mono: max-width 700px, orientation portrait, monochrome;
$breakpoint-mono: monochrome;
$breakpoint-hi-rez: 2 device-pixel-ratio;

@import "_breakpoint.scss";

.foo {
  @include breakpoint($breakpoint-medium-width) {
    content: 'medium widths';
  }
}
.bar {
  @include breakpoint($breakpoint-medium-width-em) {
    content: 'medium widths measured in ems';
  }
}
.baz {
  @include breakpoint($breakpoint-medium-not-wide) {
    content: 'medium, but not too wide';
  }
}
.tgif {
 @include breakpoint($breakpoint-medium-height) {
   content: 'medium heights';
 }
}
.omg {
  @include breakpoint($breakpoint-kind-of-wide) {
    content: 'kind of wide';
  }
}
.wtf {
  @include breakpoint($breakpoint-not-too-wide) {
    content: 'not too wide';
  }
}
.bbq {
  @include breakpoint($breakpoint-wide-portrait) {
    content: 'wide, portrait';
  }
}
.zztop {
  @include breakpoint($breakpoint-wide-portrait-mono) {
    content: 'wide, portrait, monochrome';
  }
}
.csny {
  @include breakpoint($breakpoint-mono) {
    content: 'monochrome';
  }
}
.elp {
  @include breakpoint($breakpoint-mono, print) {
    content: 'monochrome, print';
  }
}
.omgdpr {
 @include breakpoint($breakpoint-hi-rez) {
  content: 'hi resolutions';
 }
}

// You can use breakpoint without variables too.
.rhcp {
  @include breakpoint(30em 40em) {
    content: 'between 30 and 40ems';
  }
}

and i get a generated output which is

@media (min-width: 500px), (min-width: 500px) { /* line 26, ../scss/test.scss */
  .foo { content: 'medium widths'; } }

@media (min-width: 30em), (min-width: 30em) { /* line 31, ../scss/test.scss */
  .bar { content: 'medium widths measured in ems'; } }

@media (min-width: 500px) and (min-width: 700px), (min-width: 500px) and (min-width: 700px) { /* line 36, ../scss/test.scss */
  .baz { content: 'medium, but not too wide'; } }

@media (min-width: 300px) and (min-width: 700px) and (height), (min-width: 300px) and (min-width: 700px) and (height) { /* line 41, ../scss/test.scss */
  .tgif { content: 'medium heights'; } }

@media (min-width) and (min-width: 700px), (min-width) and (min-width: 700px) { /* line 46, ../scss/test.scss */
  .omg { content: 'kind of wide'; } }

@media (max-width) and (min-width: 700px), (max-width) and (min-width: 700px) { /* line 51, ../scss/test.scss */
  .wtf { content: 'not too wide'; } }

@media (max-width: 700px) and (orientation: portrait), (max-width: 700px) and (orientation: portrait) { /* line 56, ../scss/test.scss */
  .bbq { content: 'wide, portrait'; } }

@media (max-width: 700px) and (orientation: portrait) and (monochrome), (max-width: 700px) and (orientation: portrait) and (monochrome) { /* line 61, ../scss/test.scss */
  .zztop { content: 'wide, portrait, monochrome'; } }

@media (monochrome), (monochrome) { /* line 66, ../scss/test.scss */
  .csny { content: 'monochrome'; } }

@media print and (monochrome), print and (monochrome) { /* line 71, ../scss/test.scss */
  .elp { content: 'monochrome, print'; } }

@media (min-width: 2) and (device-pixel-ratio), (min-width: 2) and (device-pixel-ratio) { /* line 76, ../scss/test.scss */
  .omgdpr { content: 'hi resolutions'; } }

@media (min-width: 30em) and (min-width: 40em), (min-width: 30em) and (min-width: 40em) { /* line 83, ../scss/test.scss */
  .rhcp { content: 'between 30 and 40ems'; } }

am i missing something?

I am using Scout App to generate the output - ScoutApp release with compass 0.12.2 and sass 3.2.1 support

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

Hi!

I wish Breakpoint repo had version number tags.

Please tag the existing versions (at list the current one) and also tag whenever you build a gem.

I would like to be able to do something like this:

// Define global variable for breakpoint
@include breakpoint(720px) {
  $width:  720px;
}

// And then use it somewhere else
@include breakpoint(720px) {
  width:  $width;
}

To me this seems to be critical to be able to integrate other tools like Zen Grids where I am currently trying to do something like this:

@include breakpoint($bp-1) {
  $zen-column-count:  6;
  $zen-grid-width:    240px;
}

@include breakpoint($bp-1) {
  #page-wrapper {
    width: $zen-grid-width;

     > .panel-main_content {
      @include zen-grid-container();
      @include zen-grid-item-base();
    }
  }
}

Or am I missing something? Is it possible somehow?

Our tests seem to always miss Aspect Ratio. This isn't good because Aspect Ratio is a strange fracking beast because, unlike all other media queries, it needs to be written as a fraction as opposed to a decimal and, as such, it needs to be put in as a string as opposed to a number, and our string parsing is broken for aspect ratio. Take the following:

$rectangle: 'min-aspect-ratio' '300/250';

#foo {
  @include breakpoint($rectangle) {
    content: 'Rectangle Ad';
  }
}

That will compile to

@media (350 / 250: 'min-aspect-ratio') {
  #foo {
    content; 'Rectangle Ad';
  }
}

Now if we invert the two strings, it works fine. We need to be better at sussing out aspect-ratio (and device-aspect-ratio, and any future media queries that require fractions. Additionally, we need to update our documentation to reflect this case as I'm sure many (or at least one other person) may have run into this and we should let them know how to do it correctly.

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?

Upgrade global settings and breakpoint lookups to maps

Your last change in _breakpoint.scss:

Changed breakpoint-no-query-wrappers to breakpoint-no-query-fallbacks

also needs to be changed on your Website:

http://breakpoint-sass.com/

Thank you!
Regards, Hannes

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.

Hello!

@include breakpoint( 768px (orientation landscape) )

outputs to

@media (min-width: 768px), (orientation: landscape)

why?

My fallback.css isn't working and I don't see why anymore.

This is my style.css

// **************************************************
//  _style.scss
// **************************************************

// --------------------------------------------------
//  Sass extensions
// --------------------------------------------------
@import "compass";
@import "breakpoint";

// --------------------------------------------------
//  Embedded files
// --------------------------------------------------
@import "generic/settings";
@import "generic/mixins";
@import "generic/reset";
@import "base/grid";
@import "base/fonts";
@import "base/global";
@import "base/icons";
@import "base/forms";

Inside settings there is this

// --------------------------------------------------
//  Breakpoints
// --------------------------------------------------
$mobile: max-width 620px;
$tablet: 35em;
$desktop: 56em;

My fallback scss looks like this

// Will not print media queries
$breakpoint-no-queries: true;

// Will print No Query Fallbacks
$breakpoint-no-query-fallbacks: true;

// --------------------------------------------------
//  Embedded files
// --------------------------------------------------
@import "style";

But in IE8 my fallback styles don't work and I don't know why.
When I look at the wiki my settings file should be like this

// --------------------------------------------------
//  Breakpoints
// --------------------------------------------------
$mobile: max-width 620px, 'no-query' true;
$tablet: 35em, 'no-query' true;
$desktop: 56em, 'no-query' true;

But when I do that my site only gets the mobile view.

In my files where I use the breakpoints it looks like this

%unit {
    padding: 0 10px;
    @include breakpoint($tablet) {
        float: left;
        &.unit-right {
            float: right;
        }
    }
}

This is a preemptive issue; once these pull requests get merged in, we're gonna need to update the README

When generating css files I receive the following error message:

error sass/grassroots.styles.scss (Line 66 of _context.scss: Invalid CSS after "...holder, comma) ": expected "}", was "!global;")

This file is related to the _context.scss file for the breakpoint extension.

I have no way of knowing if these test are valid or not. :-p

see https://gist.github.com/3267146#gistcomment-390784 for history

I like this idea, perhaps we add something like:

@mixin breakpoint($breakpoint-variable, $media, $wrapper-class:false) {
  @if $wrapper-class != false {
    .#{$wrapper-class} & {
      @content;
    }  
  }
  ... the rest of breakpoint ...
}

@Snugug ?

Hey

I'm not sure if this is on my end, or a legitimate bug. But when I do something like this:

@include breakpoint(0px 1000px) {
   background-color: red;
}

the CSS that gets generated is:

@media screen and (0px: 1000px) {

Shouldn't it be something like this:

@media screen and (min-width: 0px) and (max-width: 1000px)

Any help would be greatly appreciated.
I'm using Rails 4, Ruby 2.0, breakpoint 2.0.7

Thanks!

So, Sass allows you to write this:

@media (min-width: 500px) {
  -foo: bar;

  @media (max-width: 899px) {
     -baz: stuff;
  }
}

and it will print out like so:

@media (min-width: 500px) {
  -foo: bar;
}

@media (min-width: 500px) and (max-width: 899px) {
  -baz: stuff;
}

Why dont we allow breakpoint to do this?

$small: 500px;
$large: 900px;

@include breakpoint($small) {
  -foo: bar;

  @include breakpoint($large - 1) {
    -baz: stuff;
  }
}

to do the same. OR better yet:

$small: 500px;
$large: 900px;

@include breakpoint($small) {
  -foo: bar;

  @include breakpoint($large) {
    -baz: stuff;
  }
}

and have breakpoint (in a setting to change this behavior), automatically remove one pixel so bad things dont happen. Related: will bad things happen if we are using em's if so how do we protect?

(This is half an issue to talk features, half so I remember to do it...)

So this is fairly critical as it's something that's needed to happen for a long time now and we're getting issues filed against the current state of it. The current site is grossly out of date. The examples are incorrect and our documentation no longer lives on the site. We need to update this.

For a rails 2.3 app that is using the compass-rails gem
I had to create a new initializer and add require 'breakpoint' there

@Snugug check it out. I think we should announce 1.0 tomorrow AM

I'm getting some inconsistent behavior between versions 1.3 and 2.0.2 when using the $breakpoint-no-queries option.

When $breakpoint-no-queries is true, and when I pass $no-query: true to the mixin, I expect it to strip out media queries and apply their contents. This happens in 1.3, but not in 2.0.2. In other words, $no-query makes no difference to 2.0.2.

For example, here is what I get when using the "No Wrapping Selector, Separate Stylesheet" example from the current docs

Input:

style.scss

$breakpoint-no-queries: false;

@import 'layout';

no-mq.scss

$breakpoint-no-queries: true;

@import 'layout';

_layout.scss

@import 'compass';
@import 'breakpoint';

#foo {
  background: red;
  @include breakpoint(567px, $no-query: true) {
    background: green;
  }
}

Output:

style.css (same for 1.3 and 2.0.2)

#foo {
  background: red;
}
@media (min-width: 567px) {
  #foo {
    background: green;
  }
}

no-mq.css (2.0.2)

#foo {
  background: red;
}

no-mq.css (1.3)

#foo {
  background: red;
  background: green;
}

If I understand correctly, 1.3's behavior is the intended way for this feature to work.

I just updated to the latest version of breakpoint (2.0.7), and even still the example:
$breakpoint-hi-rez: 2 device-pixel-ratio;

which is given on the documentation site (http://breakpoint-sass.com/#using_breakpoint) doesn't work for me.

My Sass:
.test
+breakpoint($breakpoint-hi-rez)
color: red

The error reads:
error sass/twc_base_styles.sass (Line 37 of _resolution.scss: 0.02083/dpi isn't a valid CSS value.)

I also tried adding $breakpoint-to-ems: true but the results were the same.

Right now when I use @include breakpoint(resolution 1.3dppx) {}, the feature and value are switched by lines 256+ in _breakpoint.scss:

      @if breakpoint-string-value(nth($breakpoint, 1)) == true {
        $feature: nth($breakpoint, 1);
        $value: nth($breakpoint, 2);
      }
      @else {
        $feature: nth($breakpoint, 2);
        $value: nth($breakpoint, 1);
      }

Adding resolution, min-resolution, and max-resolution to breakpoint-string-value() should fix it right up. If I'm missing some obvious way to use resolution media queries and causing my own problems, let me know.

It would be great to have the css output the definitions for each media query so that they could be used along side a conditional style sheet loader such as eCSSential.js

When using not/only with a media type, the media stuff gets mis-parsed. For not, we get (min-width: false), with only we get a (media: only) query. This happens with compound queries as well. When combining a not media with a fenced query, we get a fatal error. Example:

Only

@import "breakpoint";

$fenced: only print;

.foo {
    width: 100%;
    @include breakpoint($fenced) {
        width: 20px;
    }
}

.foo {
  width: 100%;
}
@media (print: only) {
  .foo {
    width: 20px;
  }
}

Not

@import "breakpoint";

$fenced: not print;

.foo {
    width: 100%;
    @include breakpoint($fenced) {
        width: 20px;
    }
}

.foo {
  width: 100%;
}
@media (min-width: false) {
  .foo {
    width: 20px;
  }
}

Not with Fenced Query

@import "breakpoint";

$fenced: not print 600px 900px;

.foo {
    width: 100%;
    @include breakpoint($fenced) {
        width: 20px;
    }
}

false is not a number for `min'

$breakpoints: 'desktop' 1020px,
              'widescreen' 1340px,
              'tallscreen' ('min-width' 1020px 'min-height' 1000px);

According to the documentation, I would expect thetallscreen breakpoint to output the following code:

@media (min-width: 1020px) and (min-height: 1000px) { … }

Instead, it outputs this:

@media (min-width: min-width) and (min-width: 1020px)
    and (min-width: min-height) and (min-width: 1000px) { … }

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.

since upgrading to breakpoint 1.2, I now get the following error:

NoMethodError on line 20 of /Library/Ruby/Gems/1.8/gems/breakpoint-1.2/lib/breakpoint.rb: undefined method `[]' for 54.6:Float

This is triggered by the sass:

@include breakpoint(1.1em) {
}

Luckily I browsed through latest commits and saw that commit message, wasn't sure why it wasn't working.... is there a way to make sure the new version keeps support for the old variable, or maybe provide a note in the documentation?

I don't have a good test case for you, unfortunately, but a coworker tried to get our build running with Ruby 2.0.0p195 and while gem list includes compass and breakpoint (2.0.5) the build fails with:

Running "compass:public" (compass) task
LoadError on line 45 of /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb: no such file to load -- breakpoint
Run with --trace to see the full backtrace

So I guess my question/issue is: have you tried using breakpoint on 2.0.0? If so, are there any tweaks to getting it working? If not, any idea about future support?

Thanks!

Is there a way to specify an or for breakpoint expressions? For example:

@media (orientation: portrait), (min-width: 35em) { ... }

I see there's some fancy automatic handling of vendor prefixed values that creates an or list of media expressions, but I'm looking for a way to ask for it myself. Another example where this is needed is when the units for a breakpoint feature need a fallback:

@media (min-resolution: 119dpi), (min-resolution: 1.3dppx) { ... }

If this doesn't exist I would be interested in coding it up. I ran into the issue while building support for a more modern resolution switching media query, realized that I would need or handling, and then thought it would be a good feature to expose to authors in general.

Thoughts, syntax suggestions, did I miss it already existing?