A CodePen by Bermon Painter. Functions

index.html

<h1>Functions</h1>
<p>If you have some simple or complex calculations you want to perform, a function will make it nice & easy. A good use of a function is calculating widths in a grid system.</p>

<article role="main">
  <h2>Main content</h2>
</article>

<aside role="complementary">
  <p>Some secondary content</p>
</aside>

style.scss

@import "compass";
h1 {
  font-size: 20px;
}
h2 {
  font-size: 16px;
}

$grid-columns: 12;
$grid-width: 960px;

@function calculate-column-width($cols) {
  @return (($grid-width / $grid-columns) * $cols / $grid-width) * 100%;
}

article, aside {
  height: 100px;
}

article {
  background-color: #ccc;
  float: left;
  width: calculate-column-width(8);
}

aside {
  background-color: #999;
  float: right;
  width: calculate-column-width(4);
}