3-variables edit

/* scss/3-variables/_breakpoint-cheatsheet.scss */ .show-breakpoints { position: relative; width: 100%; height: 300px; font-size: 14px; margin-top: 30px; line-height: 2; &:before { content: "tiny mobile: #{breakpoint($tiny-mobile-to-sm-mobile-breakpoint)}"; display: block; width: breakpoint($tiny-mobile-to-sm-mobile-breakpoint); height: 5px; background-color: green; position: absolute; top: 0px; left: 0; text-align: right; } &:after { content: "small mobile and mobile widgets: #{breakpoint($sm-mobile-to-mobile-breakpoint)}"; display: block; width: breakpoint($sm-mobile-to-mobile-breakpoint); height: 5px; background-color: green; position: absolute; top: 30px; left: 0; text-align: right; } .first-tier { position: relative; top: 60px; width: 100%; &:before { content: "mobile: #{breakpoint($mobile-to-wide-mobile-breakpoint)}"; display: block; width: breakpoint($mobile-to-wide-mobile-breakpoint); height: 5px; background-color: green; position: absolute; top: 0px; left: 0; text-align: right; } &:after { content: "wide mobile: #{breakpoint($mobile-to-desktop-breakpoint)}"; display: block; width: breakpoint($mobile-to-desktop-breakpoint); height: 5px; background-color: green; position: absolute; top: 30px; left: 0; text-align: right; } } .second-tier { position: relative; top: 120px; width: 100%; &:before { content: "desktop: #{breakpoint($desktop-to-wide-desktop-breakpoint)}"; display: block; width: breakpoint($desktop-to-wide-desktop-breakpoint); height: 5px; background-color: green; position: absolute; top: 0px; left: 0; text-align: right; } &:after { content: "wide-desktop: #{breakpoint($wide-desktop-to-ultrawide-desktop-breakpoint)}"; display: block; width: breakpoint($wide-desktop-to-ultrawide-desktop-breakpoint); height: 5px; background-color: green; position: absolute; top: 30px; left: 0; text-align: right; } } .third-tier { position: relative; top: 180px; width: 100%; &:before { content: "ultra-wide desktop: #{breakpoint($wide-desktop-to-ultrawide-desktop-breakpoint)}+"; display: block; width: 1900px; height: 5px; background-color: green; position: absolute; top: 0px; left: 0; text-align: right; } &:after { content: "youtube mobile: #{$youtube-breakpoint}"; display: block; width: $youtube-breakpoint; height: 5px; background-color: green; position: absolute; top: 30px; left: 0; text-align: right; } } .fourth-tier { position: relative; top: 240px; width: 100%; &:before { content: "mobile footer: #{$footer-mobile-to-desktop-breakpoint}"; display: block; width: $footer-mobile-to-desktop-breakpoint; height: 5px; background-color: green; position: absolute; top: 0px; left: 0; text-align: right; } &:after { content: "mobile menu: #{breakpoint($menu-mobile-to-desktop-breakpoint)}"; display: block; width: breakpoint($menu-mobile-to-desktop-breakpoint); height: 5px; background-color: green; position: absolute; top: 30px; left: 0; text-align: right; } } }