In Foundation 6, the way we use media queries in our Sass files has changed just a bit compared to how things were done in Foundation 5. We now have the ability to use the breakpoint() mixin, which makes using media queries with Sass even easier.
For example, this Scss file:
[css]
.widget {
padding: 0 5px;
h1 {
color: red;
@include breakpoint(medium) {
color: green;
}
@include breakpoint(large) {
color: blue;
}
}
}
[/css]
compiles into CSS as:
[css]
.widget {
padding: 0 5px;
}
.widget h1 {
color: red;
}
@media only screen and (min-width: 40em) {
.widget h1 {
color: green;
}
}
@media only screen and (min-width: 64em) {
.widget h1 {
color: blue;
}
}
[/css]