Fallback css not working

[IschaGast]

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;
        }
    }
}

[IschaGast]

Now I also tried the code that's in the Wiki itself and that's also not working right now.

I tried this code:

Scss styles

Style.scss

$no-queries: 678px, 'no-query' true;

#foo {
  content: 'Basic Styling';
  @include breakpoint($no-queries) {
    content: 'No Media Queries';
  }
}

ie.scss

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

@import "style";

Generated styles

style.css

#foo {
    content:'Basic Styling'
}
@media (min-width: 678px) and (no-query: true) {
    #foo {
        content:'No Media Queries'
    }
}

ie.css

#foo {
    content:'Basic Styling'
}

I removed the .touch part of the code because it was giving an error into codekit

[felek000]

same problem any solution ??

[Snugug]

Do you have the same problem with 2.4.x?

[benkutil]

@Snugug, I’m having a problem with fallbacks, but maybe I’m making an assumption on how no query fallbacks can be used.

If I specify my fallback as part of a variable, it works no problem.

SCSS

$m-l: 60em, 'no-query' '.lt-ie9';
body {
  @include breakpoint($m-l) {
      display: none;
  }
}

Rendered CSS

@media (min-width: 60em) {
  body {
    display: none;
  }
}

.lt-ie9 body {
  display: none;
}

Great!

---

Sometimes, I have a medium and a large media query, and the ruleset can be applied for both. This isn't always the case, so in my variable for the medium query, I don't specify the fallback, and instead try to do it inline within breakpoint's parameters.

SCSS

$m-m: 48em;
$m-l: 60em, 'no-query' '.lt-ie9';

body {
  @include breakpoint($m-m, 'no-query' '.lt-ie9') {
    display: block;
  }
}

Rendered CSS

@media (min-width: 48em) {
  body {
    display: block;
  }
}

"no-query"    ".lt-ie9"   body {
  display: block;
}

Here, I’d expect to get the no-query fallback, but am instead getting quoted strings in place of the selectors.

Is this not possible in Breakpoint? I didn't see it explicitly mentioned.

[Snugug]

@benkutil In the future, if you have a different issue, even if it is related, please submit a new issue.

You can do one of the following: either wrap your call in parenthesis to make it one item (@include breakpoint(($m-m, 'no-query' '.lt-ie9')) {}) or you can drop the no-query as the 2nd argument for the Breakpoint mixin is already no-query (@include breakpoint($m-m, '.lt-ie9') {})

[benkutil]

Thanks @Snugug for the quick reply, sorry to hijack the thread!

[Snugug]

Is the main issue still a problem with the latest version of Breakpoint?

[Snugug]

Seeing no movement, closing this.