most fav mixins

mixins.scss

/* rem is only relative to the html element */
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}
@mixin rem($size) {
  font-size: $size;
  font-size: calculateRem($size);
}


/* calculate ems based on pixel value
use it like em(16px) or em(16) */
$browser-context: 16;
@function em($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @return $pixels / $context * 1em;
}


/*!-- calculate a website single column width based on number of columns it should span from the grid */
$website-width: 1140;
$website-padding: 10;
$total-columns: 12;
@function colwidth($colno) {
	$pg: $website-width - ($website-padding*2);
	$col: $pg / $total-columns;
	@return percentage(($col*$colno)/$pg);
}