Menu icon Foundation
Media Queries with Foundation Variables

Here is what I currently have:

@media only screen and (min-width: 40.063em) {

    // styles in medium.scss
	@import "medium";

} // end of media query

Here is what I'm trying to achieve using the $medium-up variable from the Settings.scss file.

@media only screen and (min-width: $medium-only) {

    // styles in medium.scss
	@import "medium";

} // end of media query

However, I run into Sass errors every time I attempt to compile.

Any suggestions?

Sass

Here is what I currently have:

@media only screen and (min-width: 40.063em) {

    // styles in medium.scss
	@import "medium";

} // end of media query

Here is what I'm trying to achieve using the $medium-up variable from the Settings.scss file.

@media only screen and (min-width: $medium-only) {

    // styles in medium.scss
	@import "medium";

} // end of media query

However, I run into Sass errors every time I attempt to compile.

Any suggestions?

Geoff Kimball about 5 years ago

Importing doesn't work inside media queries. If all of the styles in your "medium" file are only relevant to that resolution, I'd recommend wrapping the entire file in a media query.

_medium.scss:

@media #{$medium-only} {
// Styles
}

app.scss:

@import "medium";

Alexander Assimidis about 5 years ago

Yes try to get it out of ur normale style.scss it is much easier to edit and cleaner!
If u have any further question just ask!

Jeremy Englert about 5 years ago

Imports work completely fine inside of media queries. You can see that with my current version of the code:

https://github.com/JeremyEnglert/JointsWP/blob/master/library/scss/style.scss

Here is what I ended up needing to do:

@media #{$medium-up}{

  // styles in medium.scss
  @import "medium";

} // end of media query