uStyle mixin to modify the select menu with different colours/dimensions (simplifies the SVG stuff)

gistfile1.sass

/* mixin to extend the us select box and allow colour/size tweaks */
@mixin us-form-select($base-color: $select-base-color, $text-color: inherit, $bg-color: white, $height: 2.4em, $padding: 0.3em 0.6em, $hover-color: $select-hover-color, $active-color: $select-active-color)
  @extend .us-form-select
  height: $height
  padding: $padding
  border-color: $base-color
  background-color: $bg-color
  @if $text-color != inherit
    color: $text-color
    +transition(border-color 200ms,color 200ms)
    &:hover,
    &:focus
      color: inherit
  @if $hover-color != $select-hover-color
    &:hover,
    &:focus
      border-color: $hover-color
  @if $active-color != $select-active-color
    &.active
      border-color: $active-color
  @if $base-color != $select-base-color
    &:disabled
      border-color: lighten($base-color, 10%)
      color: $base-color
  @media all and (-webkit-min-device-pixel-ratio: 0)
    padding-right: 40px
    @if $base-color != $select-base-color
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='10' viewBox='-10 0 31 10'><polygon fill='%23fff' points='11,0 0,0 5.5,10'/></svg>"), url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='31px' height='41px' ><rect x='0' y='0' fill='#{$base-color}' width='31' height='40'/></svg>")
    @if $hover-color != $select-hover-color
      &:hover,
      &:focus
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='10' viewBox='-10 0 31 10'><polygon fill='%23fff' points='11,0 0,0 5.5,10'/></svg>"), url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='31px' height='41px' ><rect x='0' y='0' fill='#{$hover-color}' width='31' height='40'/></svg>")
    @if $active-color != $select-active-color
      &.active
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='10' viewBox='-10 0 31 10'><polygon fill='%23fff' points='11,0 0,0 5.5,10'/></svg>"), url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='31px' height='41px' ><rect x='0' y='0' fill='#{$active-color}' width='31' height='40'/></svg>")
    @if $base-color != $select-base-color
      &:disabled
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='31' height='10' viewBox='-10 0 31 10'><polygon fill='%23fff' points='11,0 0,0 5.5,10'/></svg>"), url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='31px' height='41px' ><rect x='0' y='0' fill='#{lighten($base-color, 10%)}' width='31' height='40'/></svg>")

@mixin us-form-select-wrap($base-color: $select-base-color, $text-color: inherit, $hover-color: $select-hover-color)
  @extend .us-form-select-wrap
  &:after
    background-color: $base-color
    border: 1px solid $base-color
  @if $hover-color != $select-hover-color
    &:hover,
    &:focus
      &:after
        background-color: $hover-color
        border-color: $hover-color

gistfile2.sass

/* mixin in action - make a light grey select menu  */
.filter-select
  +us-form-select($grey-6,$grey-6)

@-moz-document url-prefix()
  .filter-select-wrap
    +us-form-select-wrap($grey-6,$grey-6)