Menu icon Foundation
Media Query Best Practices with Foundation Variables

I'm trying to make the media queries in JointsWP a bit more flexible, however, I'm running into Sass issues when I attempt to compile.

Here is how the code is currently setup.

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

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

} // end of media query

Here is what I am trying to do:

@media $medium-up {

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

} // end of media query
            

         

$medium-up is a variable from the Settings file, however, it doesn't seem to be working the way I expected.

Any suggestions?

Sass

I'm trying to make the media queries in JointsWP a bit more flexible, however, I'm running into Sass issues when I attempt to compile.

Here is how the code is currently setup.

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

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

} // end of media query

Here is what I am trying to do:

@media $medium-up {

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

} // end of media query
            

         

$medium-up is a variable from the Settings file, however, it doesn't seem to be working the way I expected.

Any suggestions?

This post has been closed. No new replies can be added.

Rafi Benkual about 5 years ago

duplicate