Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav class="pager">
  <ul>
    <li class="first"><a href="#">First</a></li>
    <li class="previous"><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="active">4</li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="next"><a href="#">Next</a></li>
    <li class="last"><a href="#">Last</a></li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Breakpoint (v2.4.1)
// ----

@import "compass";
@import "breakpoint";

$bp-s: 400px; // it's ok to put px values in here if you've set "-to-ems" to "true"!
$bp-m: 600px;
$bp-nav-break: 800px;
$bp-l: 900px;
$bp-xl: 1110px;

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  li {
    margin: 0 0.5em 0 0;
    display: none;
    &.previous, &.next, &.active {
      @include inline-block;
    }
    &.first {
      a:before {
        content: "\00AB \00a0";
      }
    }
    &.previous {
      a:before {
        content: "\003c \00a0";
      }
    }
    &.next {
      a:after {
        content: "\00a0 \003e";
      }
    }
    &.last {
      margin: 0;
      a:after {
        content: "\00a0 \00BB";
      }
    }
    @include breakpoint($bp-l) {
      &.first, &.last {
        @include inline-block;
      }
    }
    @include breakpoint($bp-xl) {
      @include inline-block;
    }
  }
}

SassMeister-output.css

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
nav ul li {
  margin: 0 0.5em 0 0;
  display: none;
}
nav ul li.previous, nav ul li.next, nav ul li.active {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
nav ul li.first a:before {
  content: "\00AB \00a0";
}
nav ul li.previous a:before {
  content: "\003c \00a0";
}
nav ul li.next a:after {
  content: "\00a0 \003e";
}
nav ul li.last {
  margin: 0;
}
nav ul li.last a:after {
  content: "\00a0 \00BB";
}
@media (min-width: 900px) {
  nav ul li.first, nav ul li.last {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
  }
}
@media (min-width: 1110px) {
  nav ul li {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
  }
}

SassMeister-rendered.html

<nav class="pager">
  <ul>
    <li class="first"><a href="#">First</a></li>
    <li class="previous"><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="active">4</li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="next"><a href="#">Next</a></li>
    <li class="last"><a href="#">Last</a></li>
  </ul>
</nav>

http://sassmeister.com/gist/8570748