Search code examples
sasszurb-foundationcompass-sass

Foundation 5: change media query ranges

I have a Foundation 5 template and I was wondering if it is a good idea to change the media query ranges.

They are currently set in the _global.scss file, but I want to overwrite them through my _custom.scss file, so I don't have any troubles upgrading the framework in future. The problem is if I set the variables $small-range, $medium-range, etc. in my _custom.css file nothing happens.

My app.scss currently includes:

@import "settings";
@import "foundation";
@import "custom";

How can I do this without editing the default settings and components files?

Thank you in advance.

Solution

  • Add variables before @import "foundation"

    @import "settings";

$small-range: (0em, 40em);  //max-width 640px, mobile-only styles
$medium-range: (40.063em, 64em);   // min-width 641px and max-width 1024px
$large-range: (64.063em, 90em);    // min-width 1024px and max-width 1440px
$xlarge-range: (90.063em, 120em);  //min-width 1441px and max-width 1920px
$xxlarge-range: (120.063em);       //min-width 1921px

@import "foundation";

    or you can create your own file such as my_settings and add these styles into this file:

    @import "settings";
@import "my_settings";
@import "foundation";

    If you want to change some range into px, better change all ranges into px from em