Media Queries
The nesting Sass feature keeps media queries local to the original selector being modified. You can avoid repeating the values in media query expressions with variables.
CSS
.img-featured {
width: 165px;
border: 4px solid white;
border-radius: 50%;
margin-top: 75px;
position: relative;
z-index: 100;
}
@media (max-width: 575px) {
.img-featured {
display: none;
}
}
Written in Sass like so:
SCSS
.img-featured {
width: 165px;
border: 4px solid white;
border-radius: 50%;
margin-top: 75px;
position: relative;
z-index: 100;
@media (max-width: $break-xs) {
display: none;
}
}
Whereas the _variables.scss
partial has the following variables:
// Breakpoints
$break-xs: 575px;
$break-s: 576px;
$break-m: 768px;
$break-l: 992px;
//...