A simple exercise illustrating how breakpoints work.

breakpoints.haml

.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

breakpoints.scss

// ----
// 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;
}