Využití podmínek v preprocesoru SASS, kde kontrolujeme šířku layoutu (layout-width) a porovnáváme jí se šířkou okna v předem definovaných media-queries. V praxi pak můžeme mít různé SASS souboru, pro různá rozlišení, v tom stejném souboru pak budeme mít definovanou i jinou šířku layoutu ta se pak aplikuje na tento jednotný layout a vybere se správná definice pro správné rozlišení.
$layout-width: 800px; // Příkladová definice
$large-screen: 1369px;
$middle-screen: 1024px;
$small-screen: 600px;
#wrapper {
margin: 0 auto;
width: $layout-width;
#container {
float: left;
width: 100%;
@if $small-screen > $layout-width {
@media screen and (max-width: $small-screen) {
color: blue;
}
} @else if $middle-screen > $layout-width {
@media screen and (max-width: $middle-screen) {
color: red;
}
} @else if $large-screen > $layout-width {
@media screen and (max-width: $large-screen) {
color: green;
}
} @else {
color: black;
}
}
}