Create a gist now

Instantly share code, notes, and snippets.

A simple exercise illustrating how breakpoints work.
.block
Hi, I am responsive!
.hard-width-800
this is 800px wide, I am not ;(
.hard-width-600
this is 600px wide, I am not ;(
%a(href="http://sassmeister.com/gist/9670232")
see the SassMeister Gist
// ----
// libsass (v0.7.0)
// ----
* {
margin: 0;
}
a {
padding: 20px;
}
%default-block {
background-color: red;
color: white;
line-height: 50px;
text-align: center;
margin-bottom: 30px;
}
$min: '(min-width: 900px)';
// target widths that are larger then 900px
// Using min-width breakpoints is considered a `mobile-first` approach
// All handheld UI styles will be written as default UI
// As you break at points larger then a minimum width, you add or alter UI
$max: '(max-width: 900px)';
// target widths that are less then 900px
// Using max-width breakpoints is considered a `desktop-first` approach
// All desktop UI will be written as default UI
// As you break at points smaller then the max width, you remove or alter UI
$and: '(min-width: 600px) and (max-width: 900px)';
// target widths that are larger then 600px AND less then 900px
$or: '(min-width: 800px), (max-width: 600px)';
// target widths that are larger then 800px OR less then 600px
$not: 'not all and (max-width: 800px)';
// target widths that are NOT less then 800px
// reverse logic makes sense to me never ... see what I did there?
.block {
@extend %default-block;
@media #{$not} {
background-color: green;
}
}
.hard-width-800 {
@extend %default-block;
background-color: orange;
width: 800px;
}
.hard-width-600 {
@extend %default-block;
background-color: purple;
width: 600px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment