Cacher is the code snippet organizer for pro developers

<div class="coupon-anchor-code coupon-anchor-code-code">
  <div class="coupon-anchor-amount">
    <svg class="icon icon-cart"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://localhost:3000/images/icons.svg#icon-cart"></use></svg>
  </div>
  <div class="coupon-anchor-label">Code</div>
</div> 

<div class="coupon-anchor-merchant">
  <div class="coupon-anchor-amount coupon-horizontal-media">
    <img class="merchant-logo" src="http://o.rmncdn.com/thumbs/logos/l/target.com-coupons.jpg">
  </div>
  <div class="coupon-anchor-label">Code</div>
</div> 

.coupon-anchor-code, .coupon-anchor-rebate, .coupon-anchor-giftcard, .coupon-anchor-sale, .coupon-anchor-instore, .coupon-anchor-merchant {
  float: left;
  margin: 0 25px 25px 0;
  padding: 0 6px;
  border-radius: 4px;
  background: #ddd;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-align: center;
  box-sizing: border-box; }
  .coupon-anchor-code .icon, .coupon-anchor-rebate .icon, .coupon-anchor-giftcard .icon, .coupon-anchor-sale .icon, .coupon-anchor-instore .icon, .coupon-anchor-merchant .icon {
    width: 30px;
    height: 45px;
    fill: white; }

.coupon-anchor-code {
  background: green;
  width: 65px;
  height: 95px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-code {
      width: 80px;
      height: 105px; } }

.coupon-anchor-merchant {
  padding: 0;
  height: 105px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-merchant {
      height: 115px; } }
  .coupon-anchor-merchant .merchant-logo {
    max-width: 100%; }

.coupon-anchor-rebate {
  background: green;
  width: 65px;
  height: 95px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-rebate {
      width: 80px;
      height: 105px; } }

.coupon-anchor-merchant {
  padding: 0;
  height: 105px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-merchant {
      height: 115px; } }
  .coupon-anchor-merchant .merchant-logo {
    max-width: 100%; }

.coupon-anchor-giftcard {
  background: green;
  width: 65px;
  height: 95px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-giftcard {
      width: 80px;
      height: 105px; } }

.coupon-anchor-merchant {
  padding: 0;
  height: 105px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-merchant {
      height: 115px; } }
  .coupon-anchor-merchant .merchant-logo {
    max-width: 100%; }

.coupon-anchor-sale {
  background: purple;
  width: 65px;
  height: 95px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-sale {
      width: 80px;
      height: 105px; } }

.coupon-anchor-merchant {
  padding: 0;
  height: 105px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-merchant {
      height: 115px; } }
  .coupon-anchor-merchant .merchant-logo {
    max-width: 100%; }

.coupon-anchor-instore {
  background: fuchsia;
  width: 65px;
  height: 95px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-instore {
      width: 80px;
      height: 105px; } }

.coupon-anchor-merchant {
  padding: 0;
  height: 105px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-merchant {
      height: 115px; } }
  .coupon-anchor-merchant .merchant-logo {
    max-width: 100%; }

.coupon-anchor-merchant {
  background: black;
  width: 65px;
  height: 95px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-merchant {
      width: 80px;
      height: 105px; } }

.coupon-anchor-merchant {
  padding: 0;
  height: 105px; }
  @media screen and (min-width: 500px) {
    .coupon-anchor-merchant {
      height: 115px; } }
  .coupon-anchor-merchant .merchant-logo {
    max-width: 100%; }

// ----
// libsass (v3.2.5)
// ----


%coupon-anchor {
	float: left;
	margin: 0 25px 25px 0; // force space to the right and bottom so it doesn't bump against any coupon content
	padding: 0 6px; // this padding keeps the line above the label from being full width
	border-radius: 4px;
	background: #ddd;
	box-shadow: 1px 1px 4px rgba(black,0.2);
	color: white;
	text-align: center;
	box-sizing: border-box;

	// size and color of SVG icons insde the coupon anchor amount div
	.icon {
		width: 30px;
		height: 45px;
		fill: white;
	}

}


$anchor-types: (
//  $anchor              $bgcolor
	"code":                green,
	"rebate":              green,
	"giftcard":            green,
	"sale":                purple,
	"instore":             fuchsia,
	"merchant":            black
);



@each $anchor, $bgcolor in $anchor-types {
	.coupon-anchor-#{$anchor} {
		@extend %coupon-anchor;

		background: $bgcolor;
	
		width: 65px;
	  height: 95px;

  	@media screen and (min-width: 500px) {
	  	width: 80px;
		  height: 105px;
	  }
	}
	
	.coupon-anchor-merchant {
	  padding: 0;
	  height: 105px;
	  
		@media screen and (min-width: 500px) {
			height: 115px;
		}
   	.merchant-logo {
  	   max-width: 100%;
  	}
	}
	
}

<div class="coupon-anchor-code coupon-anchor-code-code">
  <div class="coupon-anchor-amount">
    <svg class="icon icon-cart"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://localhost:3000/images/icons.svg#icon-cart"></use></svg>
  </div>
  <div class="coupon-anchor-label">Code</div>
</div> 

<div class="coupon-anchor-merchant">
  <div class="coupon-anchor-amount coupon-horizontal-media">
    <img class="merchant-logo" src="http://o.rmncdn.com/thumbs/logos/l/target.com-coupons.jpg">
  </div>
  <div class="coupon-anchor-label">Code</div>
</div>