Search code examples
drupalsasszenbreakpoint-sass

Breakpoint (no-query) complains to '&' when trying to use with zen grids

I tried to use breakpoint to replace a media query in _responsive.scss (see line 155) of a subtheme of the Zen 7.5.4 Drupal base theme:

// @media all and (min-width: 960px)
@include breakpoint($desktop)
{
  $zen-column-count: 5;
  …

Before that I installed breakpoint, required in config.rb, included and defined my breakpoints in _init.scss.

// Breakpoints
$breakpoint-no-query-fallbacks: true;

$small: 480px, 'no-query' '.lt-ie9';
$desktop: 960px, 'no-query' '.lt-ie9';

A simpler task works flawlessly (so the system works) however the mentioned code creates the following error:

error styles.scss (Line 118 of _breakpoint.scss: Base-level rules cannot contain the parent-selector-referencing character '&'.)

I tried to find the '&' in the code of zen-grids, but I did not find it. What do I wrong?

Solution

  • As Thamas said, Breakpoint's no-query fallback is meant to be used from within a selector; the fallbacks get prepended to the selector string with a space, so they cannot be used outside of a selector.

    This is what's going on:

    Sass with Breakpoint:

    $small: 480px, 'no-query' '.lt-ie9';
.foo {
  content: 'bar';
  @include breakpoint($small) {
    content: 'baz';
  }
}

    Plain Sass:

    .foo {
  content: 'bar';
  @media (min-width: 480px) {
    content: 'baz';
  }
  .lt-ie9 & {
    content: 'baz';
  }
}

    It is important to note that Breakpoint does not create a separated global context, so the code you've provided that sets $zen-column-count inside of your Breakpoint include will not restrict that to that breakpoint.

    The recommended workflow for working with media queries, and the workflow Breakpoint was built for, was not one where all media queries of one type are grouped together, but rather one where media queries are used in-line to adjust individual elements as they are needed. This goes hand-in-hand with the recommendation that you do not use device based media queriers, but rather media queries that are content based; i.e. media queries chosen because the current component no longer looks good and needs to be adjusted.