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"></button>
      </li>
      <li class="prize__control--right">
        <button class="icon" data-prize-id="a0Mi0000002oZIwEAM" data-action="remove-prize"></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>
  </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
  overflow: hidden
  font-family: Sans-serif
  max-width: 20em
  &:hover, &:focus
    .prize__controls
      +transition(.3s transform linear)
      +translate3d(0, 0, 0)

  
.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, 3)
  
.prize__headline
  display: block
  float: right
  margin-right: ms(7)
  
.prize__header
  +clearfix
  position: relative
  +border-top-radius(ms(-10))
  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))
  
.prize__headline
  position: relative
  top: 50%
  +transform(translateY(20%))
  +adjust-font-size-to(ms(2))
  color: nth($shade, 2)
  text-align: center
  padding-left: msem(0)
  padding-right: msem(0)
  text-transform: uppercase
  
.prize__controls
  position: absolute
  top: 0
  left: 0
  width: 100%
  background: nth($shade, 6)
  +translate3d(0, -101%, 0)
  +transition(.3s transform 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
  +trailer
  +rhythm-borders(1px, 0, ms(0), solid)
  border-color: nth($neutral, 2)
  +box-shadow(0 1px 0 1px nth($neutral, 4))

.prize__details
  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), 0 -2px 0 0 nth($shade, 3))
  +trailer(.5)
  +border-bottom-radius(ms(-10))
  padding: rhythm(.75)
  
.prize__description
  color: nth($shade, 6)
  +text-shadow(0 -1px 0 nth($neutral, 2))

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 {
  overflow: hidden;
  font-family: Sans-serif;
  max-width: 20em; }
  .prize:hover .prize__controls, .prize:focus .prize__controls {
    -webkit-transition: 0.3s transform linear;
    -moz-transition: 0.3s transform linear;
    -o-transition: 0.3s transform linear;
    transition: 0.3s transform 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); }

.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: #00b19c; }

.prize__headline {
  display: block;
  float: right;
  margin-right: 43px; }

.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: #f7f7f7;
  border-style: solid;
  border-width: 0.0625em;
  padding: -0.0625em;
  border-color: #dddddd;
  -webkit-box-shadow: inset 0 1px 0 0 white;
  -moz-box-shadow: inset 0 1px 0 0 white;
  box-shadow: inset 0 1px 0 0 white; }
  .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: #3f3e44;
  text-align: center;
  padding-left: msem(0);
  padding-right: msem(0);
  text-transform: uppercase; }

.prize__controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  -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-transition: 0.3s transform linear;
  -moz-transition: 0.3s transform linear;
  -o-transition: 0.3s transform linear;
  transition: 0.3s transform 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-bottom: 1.5em;
  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; }

.prize__details {
  background: #ec6f26;
  border-style: solid;
  border-width: 0.0625em;
  padding: -0.0625em;
  border-color: #b1541c;
  -webkit-box-shadow: inset 0 1px 0 0 #f0935c, 0 -2px 0 0 #656469;
  -moz-box-shadow: inset 0 1px 0 0 #f0935c, 0 -2px 0 0 #656469;
  box-shadow: inset 0 1px 0 0 #f0935c, 0 -2px 0 0 #656469;
  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;
  padding: 1.125em; }

.prize__description {
  color: white;
  text-shadow: 0 -1px 0 #b1541c; }

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"></button>
      </li>
      <li class="prize__control--right">
        <button class="icon" data-prize-id="a0Mi0000002oZIwEAM" data-action="remove-prize"></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>
  </section>
</div>