Add $mq-static-breakpoint to control queries for static stylesheets #2

Merged
merged 2 commits into from Oct 30, 2013

Projects

None yet

2 participants

@bewildergeist
Contributor

Instead of simply outputting all min-width queries, we can now select a
target breakpoint, and only output queries that span (or start at) that
width.

This allows us to have breakpoints that are higher than our target
width for older browsers (such as a 'widescreen' breakpoint)
without serving those min-width queries in our static/rasterized output.

@bewildergeist bewildergeist Add $mq-static-breakpoint to control which queries go in static style…
…sheets

Instead of simply outputting all min-width queries, we can now select a
target breakpoint, and only output queries that span (or start at) that
width.

This allows us to have breakpoints that are higher than our target
breakpoint for IE8 and friends (such as a 'widescreen' breakpoint)
without serving those queries to older browsers.
c1255d5
@kaelig
Member
kaelig commented Oct 18, 2013

Thanks a lot for proposing that that feature.

Unfortunately, with the way the cascade works, I'm not sure how this would be usable in the real world.

Can you illustrate with a code snippet how this would work?

@bewildergeist
Contributor

Absolutely. My next pull request was actually going to be a new test.scss file :)

Here's an example: http://sassmeister.com/gist/7055731

Switch on the HTML pane to see a preview of the last applicable query in the cascade (pink = responsive, blue = static). And flip the switch on the $test-static-breakpoint-feature variable at the top of the file to switch between my proposed feature and the current behaviour.

Essentially, the current behaviour with cascading min-width queries is a simple and elegant solution, as long as you're building mobile-first and overwriting styles with successive min-width queries. And as long as your largest breakpoint is equal to your target width in old browsers. In the above example, I've set up the following breakpoints:

(mobile      320px)
(tablet      640px)
(desktop    1024px)
(widescreen 1200px)
(tvscreen   1920px)

...which means that the current behaviour outputs these queries in static mode:

content: "from-mobile";
content: "from-tablet";
content: "from-desktop";
content: "from-widescreen";
content: "from-tvscreen";

...which means that IE8 and friends will get styles intended for much larger screens than the average IE8 browser will be running on.

With my proposed changes, the static stylesheet will rasterize these queries instead:

  content: "from-mobile";
  content: "from-tablet";
  content: "from-desktop";
  content: "from-desktop-to-widescreen";

...that is, all the min-width queries up to and including our target breakpoint (desktop in this case) and any min-and-max-width queries that span this breakpoint. But nothing intended solely for larger screens.

Isn't that a more flexible solution?

@kaelig
Member
kaelig commented Oct 27, 2013

Thanks for explaining this further.

The way you phrased it made me think that this feature worked the other way (outputting rasterized content from a particular breakpoint).

Now I get it, and this is a great addition. Can you add a couple of test cases that demonstrate the way it can work?

@bewildergeist
Contributor

Definitely. I've pushed a new commit that updates test.scss to better illustrate the feature. It's pretty much the same setup that I linked to on Sassmeister (swapping content for color to make it easier to follow along in the CSS output), but retaining all of the existing test cases with unitless numbers, pixel and em values, and custom directives.

@kaelig kaelig commented on the diff Oct 30, 2013
test/test.css
-.responsive-disabled {
- color: red;
- color: green; }
+/* Rasterized styles that span or start at the "desktop" breakpoint */
+.static:after {
@kaelig
kaelig Oct 30, 2013 Member

Any way we can avoid this rule from being in this output? Not sure what the value is in having those.

@bewildergeist
bewildergeist Oct 30, 2013 Contributor

I'm not sure I follow. You mean the .static:after selector? The :after part is superfluous, except for the fact that I like the idea of using content properties to output a text string to easily "read" the original media query in the compiled CSS. And generated content is only allowed on pseudo-elements.

But perhaps a better illustration of the concept is to create three files, _styles.scss, responsive.scss and static.scss, where the last two @import the former, and set the requisite variables to output media queries and rasterized output, respectively?

@kaelig
kaelig Oct 30, 2013 Member

Sorry I was being stupid again… This is a great test.

@kaelig kaelig merged commit bd01818 into sass-mq:master Oct 30, 2013
@bewildergeist bewildergeist deleted the unknown repository branch Oct 30, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment