Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="prize">
  <header class="prize__header">
    <h2 class="prize__rank">#4</h2>
    <h1 class="prize__headline">fdsaf fdsa fdsa</h4>
    <ul class="prize__controls">
      <li class="prize__control--left">
        <button class="icon" data-prize-id="a0Mi0000002oZIwEAM" data-action="edit-prize">edit</button>
      </li>
      <li class="prize__control--right">
        <button class="icon" data-prize-id="a0Mi0000002oZIwEAM" data-action="remove-prize">delete</button>
      </li>
  </ul>
  </header>
  
  <section class="prize__details">
    <img src="http://placekitten.com/100/100" class="prize__badge" />
    <p class="prize__description">Bacon ipsum dolor sit amet shank brisket pork loin tri-tip, short loin salami spare ribs meatloaf. Corned beef short ribs pork belly sirloin, rump landjaeger ground round andouille filet mignon.</p>
    <footer class="prize__technicalities">
      <span class="prize__value">
        <span class="prize__label-value">Prize</span>
        <span class="prize__label-monetary">100</span>
      </span>
      <span class="prize__value">
        <span class="prize__label-value--reserve">Reserve</span>
        <span class="prize__label-monetary--reserve">500</span>
      </span>
    </footer>
  </section>
</div>

SassMeister-input.sass

// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// Modular Scale (v1.0.6)
// Singularity.gs (v1.1.2)
// ----

@import "compass"
@import "singularitygs"
@import "modular-scale"
@import compass/reset
$shade: #222, #3F3E44, tint(#3F3E44, 20%), tint(#3F3E44, 50%), shade(#F6F6F6, 10%), #FFFFFF
$positive: shade(#00B19C, 50%), shade(#00B19C, 25%), #00B19C, tint(#00B19C, 25%), #D2F6F2
$negative: shade(#EC2F17, 50%), shade(#EC2F17, 25%), #EC2F17, tint(#EC2F17, 25%), tint(#EC2F17, 50%)
$neutral: shade(#B1541C, 25%), #B1541C, #EC6F26, tint(#EC6F26, 25%), tint(#EC6F26, 50%)

//Vertical Rhythm
$base-font-size: 16px
$base-line-height : $base-font-size * 1.5
+establish-baseline

// Modular Scale
$base-size: $base-font-size $base-line-height
$ratio: fourth()

body
  margin: rhythm(1)

.prize
  font-family: Sans-serif
  max-width: 20em
  overflow: hidden
  cursor: pointer
  &:hover, &:focus
    .prize__controls, .prize__technicalities
      +transition(.2s all linear)
      +translate3d(0, 0, 0)
      +backface-visibility(hidden)
    .prize__badge
      +transition(.4s all)
      +scale3d(1, 1, 1, 0)
      +backface-visibility(hidden)

  
.prize__rank
  display: block
  width: 20%
  +rhythm(0, .25, .25, 0, ms(4))
  +adjust-font-size-to(ms(4))
  text-align: center
  float: left
  color: nth($positive, 5)
  
.prize__header
  +clearfix
  position: relative
  +border-top-radius(ms(-10))
  background: nth($neutral, 4)
  +rhythm-borders(1px, 0, ms(0), solid)
  border-color: nth($neutral, 2)
  +box-shadow(inset 0 1px 0 0 nth($neutral, 5))
  border-bottom-color: transparent
  
.prize__headline
  position: relative
  top: 50%
  +transform(translateY(20%))
  +adjust-font-size-to(ms(2))
  color: nth($shade, 6)
  text-align: center
  padding-left: msem(0)
  padding-right: msem(0)
  text-transform: uppercase
  display: block
  float: right
  margin-right: ms(7)
  
.prize__controls
  position: absolute
  top: -1px
  left: -1px
  width: 100%
  background: shade(nth($shade, 6), 3%)
  +rhythm-borders(1px, 0, ms(0), solid)
  +rhythm(0, .25, .25, 0)
  border-color: nth($shade, 5)
  +box-shadow(inset 0 1px 0 0 nth($shade, 6), 0 -1px 3px -1px nth($neutral, 2))
  overflow: hidden
  +translate3d(0, -101%, 0)
  +backface-visibility(hidden)
  +transition(.2s all linear)
  button
    +adjust-font-size-to(ms(3))
    border: 0
    background: transparent
  > li
    &:first-of-type
      float: left
    &:last-of-type
      float: right

.prize__badge
  +border-radius(50%)
  display: block
  margin: 0 auto
  max-width: 100px
  +leader(.75)
  +scale3d(.9, .9, .9, 0)
  +backface-visibility(hidden)
  +rhythm-borders(1px, 0, ms(0), solid)
  border-color: nth($neutral, 2)
  +box-shadow(0 1px 0 1px nth($neutral, 4))
  +transition(.4s all)

.prize__details
  position: relative
  background: nth($neutral, 3)
  +rhythm-borders(1px, 0, ms(0), solid)
  border-color: nth($neutral, 2)
  +box-shadow(inset 0 1px 0 0 nth($neutral, 4))
  +trailer(.5)
  +border-bottom-radius(ms(-10))
  background-clip: padding-box
  +clearfix
  overflow: hidden
  
.prize__description
  color: nth($shade, 6)
  +text-shadow(0 -1px 0 nth($neutral, 2))
  padding: rhythm(.75)
  background-clip: padding-box

[class*=prize__value]
  &:first-of-type
    +float-span(1, 'first', $grid: 2)
  &:last-of-type
    +float-span(1, 'last', $grid: 2)
  &:only-of-type
    display: block
    width: 100%
  color: nth($positive, 3)
  overflow: hidden

[class*=prize__label-value]
  display: block
  +trailing-border(1px, 0, ms(0), solid)
  +rhythm(0, 1, .25, 0)
  border-color: nth($shade, 5)
  +box-shadow(0 1px 0 0 nth($shade, 6))
  margin-left: ms(0)
  margin-right: ms(0)

.prize__label-value--reserve, .prize__label-monetary--reserve
  color: nth($shade, 3)

[class*=prize__label-monetary]
  display: block
  +adjust-font-size-to(ms(3))
  +trailer(.5, ms(3))
  &:before
    content: "$"
  

.prize__technicalities
  width: 100%
  text-align: center
  background: shade(nth($shade, 6), 3%)
  +rhythm-borders(1px, 0, ms(0), solid)
  border-color: nth($shade, 5)
  +box-shadow(inset 0 1px 0 0 nth($shade, 6), 0 -1px 3px -1px nth($neutral, 2))
  overflow: hidden
  +border-radius(ms(-7))
  background-clip: padding-box
  
  position: absolute
  bottom: -1px
  left: -1px
  
  +translate3d(0, 100%, 0)
  +transition(.2s all linear)
  

SassMeister-output.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

* html {
  font-size: 100%;
}

html {
  font-size: 16px;
  line-height: 1.5em;
}

body {
  margin: 1.5em;
}

.prize {
  font-family: Sans-serif;
  max-width: 20em;
  overflow: hidden;
  cursor: pointer;
}
.prize:hover .prize__controls, .prize:hover .prize__technicalities, .prize:focus .prize__controls, .prize:focus .prize__technicalities {
  -webkit-transition: 0.2s all linear;
  -moz-transition: 0.2s all linear;
  -o-transition: 0.2s all linear;
  transition: 0.2s all linear;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.prize:hover .prize__badge, .prize:focus .prize__badge {
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  -o-transition: 0.4s all;
  transition: 0.4s all;
  -webkit-transform: perspective(0) scale3d(1, 1, 1);
  -moz-transform: perspective(0) scale3d(1, 1, 1);
  -ms-transform: perspective(0) scale3d(1, 1, 1);
  -o-transform: perspective(0) scale3d(1, 1, 1);
  transform: perspective(0) scale3d(1, 1, 1);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.prize__rank {
  display: block;
  width: 20%;
  margin-top: 0em;
  padding-top: 0.21429em;
  padding-bottom: 0.21429em;
  margin-bottom: 0em;
  font-size: 1.75em;
  line-height: 1.71429em;
  text-align: center;
  float: left;
  color: #d2f6f2;
}

.prize__header {
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
  position: relative;
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  background: #f0935c;
  border-style: solid;
  border-width: 0.0625em;
  padding: -0.0625em;
  border-color: #b1541c;
  -webkit-box-shadow: inset 0 1px 0 0 #f5b792;
  -moz-box-shadow: inset 0 1px 0 0 #f5b792;
  box-shadow: inset 0 1px 0 0 #f5b792;
  border-bottom-color: transparent;
}
.prize__header:before, .prize__header:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.prize__header:after {
  clear: both;
}

.prize__headline {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(20%);
  -moz-transform: translateY(20%);
  -ms-transform: translateY(20%);
  -o-transform: translateY(20%);
  transform: translateY(20%);
  font-size: 1.3125em;
  line-height: 2.28571em;
  color: white;
  text-align: center;
  padding-left: msem(0);
  padding-right: msem(0);
  text-transform: uppercase;
  display: block;
  float: right;
  margin-right: 43px;
}

.prize__controls {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  background: #f7f7f7;
  border-style: solid;
  border-width: 0.0625em;
  padding: -0.0625em;
  margin-top: 0em;
  padding-top: 0.375em;
  padding-bottom: 0.375em;
  margin-bottom: 0em;
  border-color: #dddddd;
  -webkit-box-shadow: inset 0 1px 0 0 white, 0 -1px 3px -1px #b1541c;
  -moz-box-shadow: inset 0 1px 0 0 white, 0 -1px 3px -1px #b1541c;
  box-shadow: inset 0 1px 0 0 white, 0 -1px 3px -1px #b1541c;
  overflow: hidden;
  -webkit-transform: translate3d(0, -101%, 0);
  -moz-transform: translate3d(0, -101%, 0);
  -ms-transform: translate3d(0, -101%, 0);
  -o-transform: translate3d(0, -101%, 0);
  transform: translate3d(0, -101%, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.2s all linear;
  -moz-transition: 0.2s all linear;
  -o-transition: 0.2s all linear;
  transition: 0.2s all linear;
}
.prize__controls button {
  font-size: 1.5em;
  line-height: 2em;
  border: 0;
  background: transparent;
}
.prize__controls > li:first-of-type {
  float: left;
}
.prize__controls > li:last-of-type {
  float: right;
}

.prize__badge {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  max-width: 100px;
  margin-top: 1.125em;
  -webkit-transform: perspective(0) scale3d(0.9, 0.9, 0.9);
  -moz-transform: perspective(0) scale3d(0.9, 0.9, 0.9);
  -ms-transform: perspective(0) scale3d(0.9, 0.9, 0.9);
  -o-transform: perspective(0) scale3d(0.9, 0.9, 0.9);
  transform: perspective(0) scale3d(0.9, 0.9, 0.9);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  border-style: solid;
  border-width: 0.0625em;
  padding: -0.0625em;
  border-color: #b1541c;
  -webkit-box-shadow: 0 1px 0 1px #f0935c;
  -moz-box-shadow: 0 1px 0 1px #f0935c;
  box-shadow: 0 1px 0 1px #f0935c;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  -o-transition: 0.4s all;
  transition: 0.4s all;
}

.prize__details {
  position: relative;
  background: #ec6f26;
  border-style: solid;
  border-width: 0.0625em;
  padding: -0.0625em;
  border-color: #b1541c;
  -webkit-box-shadow: inset 0 1px 0 0 #f0935c;
  -moz-box-shadow: inset 0 1px 0 0 #f0935c;
  box-shadow: inset 0 1px 0 0 #f0935c;
  margin-bottom: 0.75em;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background-clip: padding-box;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
  overflow: hidden;
}
.prize__details:before, .prize__details:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.prize__details:after {
  clear: both;
}

.prize__description {
  color: white;
  text-shadow: 0 -1px 0 #b1541c;
  padding: 1.125em;
  background-clip: padding-box;
}

[class*=prize__value] {
  color: #00b19c;
  overflow: hidden;
}
[class*=prize__value]:first-of-type {
  width: 44.44444%;
  clear: right;
  float: left;
  margin-left: 0;
  margin-right: 11.11111%;
  clear: both;
}
[class*=prize__value]:last-of-type {
  width: 44.44444%;
  clear: right;
  float: right;
  margin-right: 0;
}
[class*=prize__value]:only-of-type {
  display: block;
  width: 100%;
}

[class*=prize__label-value] {
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 0.0625em;
  padding-bottom: -0.0625em;
  margin-top: 0em;
  padding-top: 1.5em;
  padding-bottom: 0.375em;
  margin-bottom: 0em;
  border-color: #dddddd;
  -webkit-box-shadow: 0 1px 0 0 white;
  -moz-box-shadow: 0 1px 0 0 white;
  box-shadow: 0 1px 0 0 white;
  margin-left: 16px;
  margin-right: 16px;
}

.prize__label-value--reserve, .prize__label-monetary--reserve {
  color: #656469;
}

[class*=prize__label-monetary] {
  display: block;
  font-size: 1.5em;
  line-height: 2em;
  margin-bottom: 0.5em;
}
[class*=prize__label-monetary]:before {
  content: "$";
}

.prize__technicalities {
  width: 100%;
  text-align: center;
  background: #f7f7f7;
  border-style: solid;
  border-width: 0.0625em;
  padding: -0.0625em;
  border-color: #dddddd;
  -webkit-box-shadow: inset 0 1px 0 0 white, 0 -1px 3px -1px #b1541c;
  -moz-box-shadow: inset 0 1px 0 0 white, 0 -1px 3px -1px #b1541c;
  box-shadow: inset 0 1px 0 0 white, 0 -1px 3px -1px #b1541c;
  overflow: hidden;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  background-clip: padding-box;
  position: absolute;
  bottom: -1px;
  left: -1px;
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  -webkit-transition: 0.2s all linear;
  -moz-transition: 0.2s all linear;
  -o-transition: 0.2s all linear;
  transition: 0.2s all linear;
}

SassMeister-rendered.html

<div class="prize">
  <header class="prize__header">
    <h2 class="prize__rank">#4</h2>
    <h1 class="prize__headline">fdsaf fdsa fdsa</h4>
    <ul class="prize__controls">
      <li class="prize__control--left">
        <button class="icon" data-prize-id="a0Mi0000002oZIwEAM" data-action="edit-prize">edit</button>
      </li>
      <li class="prize__control--right">
        <button class="icon" data-prize-id="a0Mi0000002oZIwEAM" data-action="remove-prize">delete</button>
      </li>
  </ul>
  </header>
  
  <section class="prize__details">
    <img src="http://placekitten.com/100/100" class="prize__badge" />
    <p class="prize__description">Bacon ipsum dolor sit amet shank brisket pork loin tri-tip, short loin salami spare ribs meatloaf. Corned beef short ribs pork belly sirloin, rump landjaeger ground round andouille filet mignon.</p>
    <footer class="prize__technicalities">
      <span class="prize__value">
        <span class="prize__label-value">Prize</span>
        <span class="prize__label-monetary">100</span>
      </span>
      <span class="prize__value">
        <span class="prize__label-value--reserve">Reserve</span>
        <span class="prize__label-monetary--reserve">500</span>
      </span>
    </footer>
  </section>
</div>