Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple way to help identify which breakpoint you're in when using $variables as media query values.
$debug-breakpoint: true;
$bp1: 'min-width: 20em'; // 320px
$bp2: 'min-width: 30em'; // 480px
$bp3: 'min-width: 37.5em'; // 600px
$bp4: 'min-width: 48em'; // 768px
$bp5: 'min-width: 56.25em'; // 900px
$bp6: 'min-width: 68.75em'; // 1100px
$bp7: 'min-width: 81.25em'; // 1300px
@if ($debug-breakpoint == true) {
body:before {
content: 'Initial';
position: fixed;
text-align: center;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0,0,0,0.85);
color: #FFF;
font-weight: bold;
z-index: 999;
padding: 1em 2em;
@media( $bp1 ) {
content: 'Breakpoint 1'
}
@media( $bp2 ) {
content: 'Breakpoint 2'
}
@media( $bp3 ) {
content: 'Breakpoint 3'
}
@media( $bp4 ) {
content: 'Breakpoint 4'
}
@media( $bp5 ) {
content: 'Breakpoint 5'
}
@media( $bp6 ) {
content: 'Breakpoint 6'
}
@media( $bp7 ) {
content: 'Breakpoint 7'
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.