Cacher is the code snippet organizer for pro developers

<div class="merchant-header">

    <div class="merchant-logo">
      <img src="http://o.rmncdn.com/thumbs/logos/l/target.com-coupons.jpg">
      <img src=/"http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/journeys.com-coupons.jpg">
      <!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/footaction.com-coupons.jpg">-->
      <!--<img src="http://o.rmncdn.com/thumbs/logos/l/gapoutlet.com-coupons.jpg">-->
    </div>

    <div class="merchant-info">
      <h1 class="h1">
        <span class="merchant-name">Target</span>
        <span class="merchant-tagline">Coupon Codes and Sales</span>
      </h1>

      <div class="favorite favorite-merchant">
        {{>design_standards/_helpers/icon "icon-heart"}}
        <a href="#" class="favorite-link">Favorite</a>
      </div>

    </div>
</div>

* {
  box-sizing: border-box;
}

.merchant-logo {
  display: inline-block;
  overflow: hidden;
  width: 150px;
  height: 150px;
  padding: 0;
  border: 0 solid 0;
  border-radius: 0;
  background-color: red;
  line-height: 150px;
  text-align: center;
  font-size: 0;
}

.merchant-logo img {
  vertical-align: middle;
  width: 100%;
  max-width: 150px;
  max-height: 150px;
}

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

* {	box-sizing: border-box;}
$gray-light: #ddd;


@mixin square-image($square-size, $background: transparent, $border-width: 1px, $border-color: $gray-light, $border-radius: 3px, $padding: 5px) {
	$img-size: $square-size - $padding*2 - $border-width*2;
	  
	display: inline-block;
	overflow: hidden;
// 	box-sizing: content-box; // math doesn't work if it's border-box which is applied to * items in Roux base, so we have to override it to be content-box
	width: $square-size;
	height: $square-size;
	padding: $padding;
	border: $border-width solid $border-color;
	border-radius: $border-radius;
	background-color: $background;
	line-height: $img-size;
	text-align: center;
  font-size: 0;


	img {
		vertical-align: middle;
		width: 100%;
		@if $padding > 0 {
			max-width: $img-size;
			max-height: $img-size;
		}
		@else {
			max-width: $square-size;
			max-height: $square-size;
		}
	}
}


// @mixin square-image($img-size, $background: transparent, $border-width: 1px, $border-color: $gray-light, $border-radius: 3px, $padding: 5px) {
// 	display: inline-block;
// 	overflow: hidden;
// 	width: $img-size;
// 	height: $img-size;
// 	border: $border-width solid $border-color;
// 	border-radius: $border-radius;
// 	background-color: $background;
// 	line-height: $img-size;
// 	text-align: center;

// 	// Any padding defined on this container will cause the image to be
// 	// off-centered. Set padding of 0 to make sure nothing will override it.
// 	padding: 0;

// 	img {
// 		position: relative;

// 		// Adding a border pushes the image down, so we need to pull it back up.
// 		top: -$border-width;

// 		vertical-align: middle;
// 		padding: $padding;
// 		max-width: 100%;
// 	}
// }


.merchant-logo {
  // @include square-image(100px, white, 1px, #ddd, 1px, 10px);
  // @include square-image(75px);
  // @include square-image(75px,transparent,0,transparent,0,0)
  // @include square-image(150px, red, 5px, black, 2px, 10px);
@include square-image(150px, red, 0,0,0,0);
} 

<div class="merchant-header">

    <div class="merchant-logo">
      <img src="http://o.rmncdn.com/thumbs/logos/l/target.com-coupons.jpg">
      <img src=/"http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/journeys.com-coupons.jpg">
      <!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/footaction.com-coupons.jpg">-->
      <!--<img src="http://o.rmncdn.com/thumbs/logos/l/gapoutlet.com-coupons.jpg">-->
    </div>

    <div class="merchant-info">
      <h1 class="h1">
        <span class="merchant-name">Target</span>
        <span class="merchant-tagline">Coupon Codes and Sales</span>
      </h1>

      <div class="favorite favorite-merchant">
        {{>design_standards/_helpers/icon "icon-heart"}}
        <a href="#" class="favorite-link">Favorite</a>
      </div>

    </div>
</div>