Media Queries | Sass
Sass Media Queries
Sass media queries
You can use CSS media queries with
$mobile-width: 600px;
$desktop-width: 1200px;
.content {
color: #fff;
border: 1px solid #888;
@media screen and (max-width: $mobile-width) {
width: 100%;
background-color: #800;
}
@media screen and (min-width: $desktop-width) {
width: 800px;
background-color: #008;
}
}
The above code of mq1.scss is transpiled to the following mq1.css:
.content {
color: #fff;
border: 1px solid #888;
}
@media screen and (max-width: 600px) {
.content {
width: 100%;
background-color: #800;
}
}
@media screen and (min-width: 1200px) {
.content {
width: 800px;
background-color: #008;
}
}
Sass media queries with variables
The media queries can be assigned to variables. The code above can written as the following
$mobile-width: "screen and (max-width: 600px)";
$desktop-width: "screen and (min-width: 1200px)";
.content {
color: #fff;
border: 1px solid #888;
@media #{$mobile-width} {
width: 100%;
background-color: #800;
}
@media #{$desktop-width} {
width: 800px;
background-color: #008;
}
}
The code above will be compliled to give the ouptut same as of mq1.css.