These are some mixins used to create some of the complex layouts on http://creditcardreviews.com/. These styles are applied in different contexts across the site. This makes it possible to change things in one place and apply everywhere.

mixins.sass

// ---------------------------------------------------------------------------
// Imports

@import compass/css3

// ----------------------------------------------------------------------
// Colors

$gray: #979c9e
$blue: #4f95bf
$green: #9ac034
$brown: #99938a
$yellow: #ebb954
$orange: #c85218
$charcoal: #1f2e33
$light-gray: #f2f2f2

// ----------------------------------------------------------------------
// Placeholders

=placeholder-style
  color: #b4c0c4

=apply-placeholders
  &::-webkit-input-placeholder
    +placeholder-style
  &:-moz-placeholder
    +placeholder-style
  &.placeholder 
    +placeholder-style

.placeholders
  +apply-placeholders

input, textarea
  @extend .placeholders

// ----------------------------------------------------------------------
// Fonts

=quatro
  font-family: 'quatro-slab', sans-serif

=facit
  font-family: 'jaf-facitweb', sans-serif

=bernina
  font-family: 'jaf-bernina-sans', sans-serif

// ----------------------------------------------------------------------
// Mixins

=logo
  +facit
  line-height: 1
  font-size: 18px
  font-weight: 200
  strong
    display: block
    font-weight: 800

=button
  width: auto
  border: none
  cursor: pointer
  padding: 0 15px
  line-height: 38px
  +border-radius(3px)
  display: inline-block
  background-color: $charcoal
  border: 1px solid darken($charcoal, 10%)
  &.primary
    background-color: #9ac034
  &.small
    color: #898989
    padding: 0 10px
    line-height: 28px
    background: $light-gray
    border: 1px solid darken($light-gray, 10%)
  &.feed
    float: right
    padding-left: 36px
    margin-bottom: 40px
    background: url(/assets/icons/feed.png) 10px 50% no-repeat

=input
  height: 38px
  border: none
  color: #b4c0c4
  color: #4683a9
  font-size: 16px
  padding: 0 16px
  +appearance(none)
  line-height: 38px
  +border-radius(3px)
  vertical-align: middle
  border: 1px solid #b4c2cc
  &.file
    padding: 0
    border: none
    line-height: 1

=info
  width: 14px
  height: 14px
  cursor: pointer
  display: inline-block
  background: url(/assets/icons/info.png) 0 0 no-repeat

=article
  margin: 30px 0
  overflow: auto
  background: #fff
  header
    margin: 0
    padding: 
      top: 20px
      bottom: 20px
    overflow: hidden
    border-bottom: 1px solid #f2f2f2
  footer
    margin: 0
    padding: 0
    width: 100%
    border: none
    background: $light-gray
    border-top: 1px solid #e6e6e6
    border-bottom: 2px solid #e6e6e6

=card
  margin: 0
  background: none
  +span-columns(6, 12)
  &.last
    +span-columns(6 omega, 10)
  .meta
    overflow: hidden
  .image
    +span-columns(3, 6)
  .meta
    +span-columns(3 omega, 6)
  .star-rating
    display: block
  .actions, blockquote
    +span-columns(6, 6)
    p, cite
      +span-columns(5, 6)
    img
      +span-columns(1 omega, 6)
  .category
    color: #425156
  h2
    margin: 20px 0
  .title
    display: block
    font-size: 24px
    padding: .5em 0
    line-height: 1.2
    margin-bottom: .5em
    border-bottom: 1px solid #f2f2f2
  .reviews
    color: #b0a99e
  .actions
    margin: 1.5em 0
    font-size: 16px
    .button
      margin: 0 1.5em 0 0
  blockquote
    font-size: 15px
  dl
    +default-list
  .offer-rewards
    +icons
    color: $brown
    margin: 1em 0
    line-height: 24px

=offer
  header
    color: $brown
    +span-columns(12, 12, 1.5em)
    .meta
      +span-columns(6, 12)
      .rating, .reviews
        margin: 5px 0 0 0
        display: inline-block
        vertical-align: middle
      .reviews
        line-height: 16px
    .extra
      +icons
      +actions
      text-align: right
      +span-columns(6 omega, 12)
      .saved
        font-size: 13px
        margin: 0 16px 0 0
        display: inline-block
        vertical-align: middle
        strong
          color: $green
          display: block
          font-size: 24px
          font-weight: normal
        &.negative strong
          color: $orange
  section
    padding: 20px 0 0 0
    +span-columns(9, 12, 1.5em)
    .image
      +span-columns(3, 10)
    .credit-score-data
      +highlighted-list
      margin: 0 0 20px 0
      +span-columns(7 omega, 10)
      dt
        +span-columns(1, 7)
      dd
        +span-columns(2, 7)
      dd.last
        +span-columns(2 omega, 7)
        +suffix(2, 7)
    .pricing
      +span-columns(7 omega, 10)
      dt
        +span-columns(1, 7)
      dd
        +span-columns(2, 7)
      dd.last
        +span-columns(2 omega, 7)
  aside
    padding: 20px 0 0 0
    +span-columns(3 omega, 12, 1.5em)
    background: url(/assets/rules/e5.png) 0 100% repeat-y
    dt
      +span-columns(1, 3)
    dd
      +span-columns(2 omega, 3)
    dd.last
      +prefix(1, 3)
  footer
    background: #fff
    +span-columns(12, 12)
    .summary
      +span-columns(12, 12, 1.5em)
      li
        list-style: square inside
    .pricing
      +span-columns(10, 10)
      dt
        +prefix(2.25)
        +span-columns(2, 10)
      dd
        +span-columns(2, 10)
      dd.last
        +span-columns(2 omega, 10)
    a
      clear: left
      padding: 10px
      color: #5c9fc8
      display: block
      cursor: pointer
      text-align: center
      background: $light-gray
    .less-details
      display: none

=custom-select($lineheight)
  .custom-select
    position: relative
    display: inline-block
    vertical-align: middle
    line-height: $lineheight
    &.open
      a
        +border-radius(3px 3px 0 0)
    a
      color: #b2b2b2
      display: block
      cursor: pointer
      +border-radius(3px)
      padding: 0 42px 0 10px
      line-height: $lineheight
      border: 1px solid #b4c2cc
      background: #f7f7f7 url(/assets/icons/custom-select.png) 100% 50% no-repeat
    .options
      left: 0
      right: 0
      display: none
      position: absolute
      &.shown
        display: block
      .option
        color: $charcoal
        border-top: none
        +border-radius(0)
        background: #f7f7f7
        white-space: nowrap
        &:hover
          background: #FFF
      .last
        +border-radius(0 0 3px 3px)

=icons
  .icons
    display: inline-block
    .icon
      margin: 0
      width: 24px
      height: 24px
      vertical-align: top
      display: inline-block
    .rewards
      background: url(/assets/icons/rewards.png)
    .cash-back
      background: url(/assets/icons/cash-back.png)
    .travel
      background: url(/assets/icons/travel.png)
    .miles
      background: url(/assets/icons/miles.png)
    .hotel
      background: url(/assets/icons/hotel.png)
    .gas
      background: url(/assets/icons/gas.png)
    .sign-up
      background: url(/assets/icons/signup-bonus.png)
    .retail
      background: url(/assets/icons/retail-rewards.png)

=actions
  .actions
    display: inline-block
    vertical-align: middle
    .button
      color: #faf4ed
      font-size: 16px
      background: $yellow
      border-color: darken($yellow, 10%)
      &.primary
        background: $blue
        border-color: darken($blue, 10%)
      &.secondary
        background: $green
        border-color: darken($green, 10%)
  .action
    clear: both
    margin: 20px 0
    .primary
      color: #faf4ed
      display: block
      font-size: 16px
      background: $blue
      text-align: center
      border-color: darken($blue, 10%)