A Pen by CrocoDillon.

index.html

<h1><a href="https://gist.github.com/CrocoDillon/7580601">Guides .SCSS</a></h1>
<p>Simple guides for prototyping!</p>

Scss-Guides.markdown

Scss Guides

Create guides easily with this Scss mixin (like guides in Photoshop). Useful for creating prototypes and aligning elements.

A Pen by CrocoDillon on CodePen.

License.

style.scss

/**
 * SOURCE ON:
 *
 * GitHub  - https://gist.github.com/CrocoDillon/7580601
 * CodePen - http://codepen.io/CrocoDillon/pen/9790b1dcdd40e225de0b2c23c1ec30f1
 *           (you can embed this Pen if you want a quickstart)
 */

/*
 * Configurable variables.
 */
$guides-default-color: #4e68c7;
$guides-default-orientation: horizontal;

/*
 * Simple example using default color and orientation.
 *\/
body {
  @include guides(50px 100px 200px);
}
/**/

/*
 * Complex example using custom colors and orientations.
 */
body {
  @include guides(
    (red horizontal 24px)
    (purple horizontal (676px 700px))
    (blue vertical (10% 40% 90%))
    (#999 vertical (10% 20% 30% 40% 50% 60% 70% 80% 90%))
    (green horizontal (200px 300px 600px))
    (blue horizontal (210px 290px 310px 590px))
  );
}
/**/









/*
 * Don't mention the messy CSS! 0_o
 *
 * Disclaimer: for demonstration purposes only.
 */
html, body {
  height: 100%;
}
h1 {
  padding: 1.1em 0.1em 0.85em;
  margin: 24px 60% 24px 10%;
  background: rgba(slategray, 0.4);
  font: 400 3.2em/1.5 'Loved by the King';
  text-align: center;
  white-space: pre;
}
a {
  background: transparent;
  color: black;
  text-decoration: none;
}
p {
  position: absolute;
  top: 210px;
  left: 40%;
  box-sizing: border-box;
  width: 50%;
  height: 80px;
  padding: 0.5em;
  margin: 0;
  background: rgba(yellow, 0.4);
  font: 400 2em/1.5 'Loved by the King';
}