Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

#container {
  width: 500px;
  margin: 20px auto;
  
  img {
    width: 100%;
  }
  
  label {
    position: absolute;
    right: 0;
    padding-left: 10px;
    font: 10px Lucida Grande, sans-serif;
    color: #ccc;
    -webkit-transform: translateX(100%);
  }
  
  input[type=range] {
    display: block;
    width: 70px;
  }
}

.meme-text {
  -webkit-text-stroke: 2px black; // TODO: Replace this with text-shadow
  position: absolute;
  width: 100%;
  color: white;
  font: bold 44px Impact, sans-serif;
  text-align: center;
  outline-color: hotpink;
  outline-offset: -3px;
  
  &.top {
    top: 0;
  }
  
  &.bottom {
    bottom: 0;
  }
}

SassMeister-output.css

#container {
  width: 500px;
  margin: 20px auto;
}
#container img {
  width: 100%;
}
#container label {
  position: absolute;
  right: 0;
  padding-left: 10px;
  font: 10px Lucida Grande, sans-serif;
  color: #ccc;
  -webkit-transform: translateX(100%);
}
#container input[type=range] {
  display: block;
  width: 70px;
}

.meme-text {
  -webkit-text-stroke: 2px black;
  position: absolute;
  width: 100%;
  color: white;
  font: bold 44px Impact, sans-serif;
  text-align: center;
  outline-color: hotpink;
  outline-offset: -3px;
}
.meme-text.top {
  top: 0;
}
.meme-text.bottom {
  bottom: 0;
}