My stylus

components.styl

.pagination
  @extend .clearfix
  > li
    display inline
    float left
    a, span
      +xs-layout()
        padding 3px 7px
        font-size 14px
      +sm-layout()
        padding 5px 12px
      margin-left -1px
      border 1px solid #ddd
      color #428bca
      &:hover, &:active
        background-color #eee
        color #2a6496
    &:first-child
      a, span
        border-top-left-radius 4px
        border-bottom-left-radius 4px
    &:last-child
      a, span
        border-top-right-radius 4px
        border-bottom-right-radius 4px
    &.active
      a, span
        background-color #428bca
        border-color #428bca
        color white

index.styl

@import nib
@import variable
@import mixin
@import components

layout.styl

.clearfix
  clearfix()
.f-left
  float left
.f-right
  float right

mixin.styl

xs-layout()
  @media (max-width: $screen-xs-max)
    {block}
sm-layout()
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
    {block}
md-layout()
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max)
    {block}
lg-layout()
  @media (min-width: $screen-lg-min)
    {block}

variable.styl

$screen-xs-min = 480px

// Small screen / tablet
$screen-sm-min = 768px

// Medium screen / desktop
$screen-md-min = 992px

// Large screen / wide desktop
$screen-lg-min = 1200px

// So media queries don't overlap when required, provide a maximum
$screen-xs-max = ($screen-sm-min - 1)
$screen-sm-max = ($screen-md-min - 1)
$screen-md-max = ($screen-lg-min - 1)