Menu icon Foundation
New media query function doesn't work ... !?

I'm using Codekit. Using more than one media query in a stylesheet (style.scss) crashes the app. One media query is fine. Any thoughts?

@media screen and #{breakpoint(small)} {
  .callout {background-color:#999;}
}

@media screen and #{breakpoint(medium)} {
  .callout {background-color:#666;}
}

@media screen and #{breakpoint(large)} {
  .callout {background-color:#333;}
}
            

         

foundation 6

I'm using Codekit. Using more than one media query in a stylesheet (style.scss) crashes the app. One media query is fine. Any thoughts?

@media screen and #{breakpoint(small)} {
  .callout {background-color:#999;}
}

@media screen and #{breakpoint(medium)} {
  .callout {background-color:#666;}
}

@media screen and #{breakpoint(large)} {
  .callout {background-color:#333;}
}
            

         
Bryan Jones over 3 years ago

Make sure you're running CodeKit 2.6.1. Then, select your Sass file in CodeKit and make sure the "use Libsass" checkbox is checked. There's no reason the code above should cause an issue. If you keep having problems, send me an email.

Joop Vos over 3 years ago

With Bryan (Codekit) done some research ... but the outcome is that the (new) function (http://foundation.zurb.com/sites/docs/media-queries.html#breakpoint-function) isn't recognised.

Foundationers ... why not?

Joop Vos over 3 years ago

With Foundation 6.1.2 the default breakpoints are:

$breakpoints: (
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);

With ...

@media screen and #{breakpoint(small)} {...}

'small' doesn't do it's job when set at 0px. It does work when set at 1px or larger.

Bug ... !?