Cacher is the code snippet organizer for pro developers

@mixin wh($width, $height: $width) {
  width: $width;
  height: $height;
}

.square { @include wh(200px); }

/*=======================================*/

/*Styling stuff - Not needed for demo*/
.components-demo { display:flex; align-items:center; justify-content:space-around;  width:60%; margin:auto; }
.code { text-align: left; }
.square { background:linear-gradient($g, darken($g,10%)); border-radius:3px; box-shadow:inset 0 0 0 10px rgba(black,.05), 0 2px 5px rgba(black,.5); }
time { font-size: 11px; color:rgba(white,.1); }

<h1>Sass mixin for width and height</h1>
<p>Instead of typing <code>width:200px; height:200px;</code>, just type <code>@include wh(150px);</code></p>
<hr>
<div class="components-demo">
  <div class="square"></div>
  <div class="code">
    <h2>Mixin:</h2>
    <pre>@mixin wh($width, $height: $width) {
      width: $width;
      height: $height;
}</pre>
    <h2>HTML</h2>
    <code> &lt;div class="square">&lt;/div> </code>
    <h2>Usage:</h2>
    <code>.square { @include wh(150px); }</code>
  </div>
</div>
<hr>
<p>Created by <a href="http://ricardozea.me/">Ricardo Zea</a></p>
<time datetime="3-23-2014">Created on: March 23, 2014</time>