Menu icon Foundation
Foundation 5 breakpoints

Hi!

I'm using foundation 5 on a project which I am using with SASS (which I'm totally new to).
I'd say I'm using Foundation in a crude way in as much as I downloaded the non-SASS version of F5 which gave me the grid and the vanilla basics.

So - the grid I have is totally vanilla CSS (probably odd, but bare with me) and then I have a main.scss (for my custom SASS) which gets compiled with all the imported .scss files to main.css. 

I want to use SASS for the media-queries as found here:
http://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html

I have copy and pasted from the above link into a _breakpoints.scss file, and I @import that into my main.scss file. The compiler runs and returns no errors whatsoever.

I'm trying a basic color change to check if the query is running which looks like this:

.aqua-btn {
  background-color: $aqua-main;
  @media #{$medium-up} {
      background-color: $dark-main;
  }
}


The change doesn't affect the background-color at all, but there are no errors in Terminal.
However if I add in the exact same media query in a Vanilla CSS way (like the below) it works totally fine!

.aqua-btn {
  background-color: $aqua-main;
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .aqua-btn {
    background: black;
    
  }
}



Any ideas???

Thanks!



Sassgridmedia querieshelpFoundation 5

Hi!

I'm using foundation 5 on a project which I am using with SASS (which I'm totally new to).
I'd say I'm using Foundation in a crude way in as much as I downloaded the non-SASS version of F5 which gave me the grid and the vanilla basics.

So - the grid I have is totally vanilla CSS (probably odd, but bare with me) and then I have a main.scss (for my custom SASS) which gets compiled with all the imported .scss files to main.css. 

I want to use SASS for the media-queries as found here:
http://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html

I have copy and pasted from the above link into a _breakpoints.scss file, and I @import that into my main.scss file. The compiler runs and returns no errors whatsoever.

I'm trying a basic color change to check if the query is running which looks like this:

.aqua-btn {
  background-color: $aqua-main;
  @media #{$medium-up} {
      background-color: $dark-main;
  }
}


The change doesn't affect the background-color at all, but there are no errors in Terminal.
However if I add in the exact same media query in a Vanilla CSS way (like the below) it works totally fine!

.aqua-btn {
  background-color: $aqua-main;
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .aqua-btn {
    background: black;
    
  }
}



Any ideas???

Thanks!



Ryan McCready almost 3 years ago

Hi there,

You can use the breakpoints out of the box, without having to copy them over into a separate folder. 

We wrote a lesson on changing or adding breakpoints in Foundation 5 and you can check it out here. Maybe this is what you are looking for?