Updated Post: Using Foundation 6 Media Queries with Sass
The Foundation Grid comes with predefined media queries that can be nested into your Sass styles to create specific styles for different screen sizes.
For example, this Scss file:
[css]
.widget {
padding: 0 5px;
h1 {
color: red;
@media #{$medium-up} {
color: green;
}
@media #{$large-up} {
color: blue;
}
}
}
[/css]
compiles into CSS as:
[css]
.widget {
padding: 0 5px;
}
.widget h1 {
color: red;
}
@media only screen and (min-width: 40.0625em) {
.widget h1 {
color: green;
}
}
@media only screen and (min-width: 64.063em) {
.widget h1 {
color: blue;
}
}
[/css]
