A CodePen by Bermon Painter. Math Operations

index.html

<h1>Math Operations</h1>
<p>Sass has some pretty nifty opertions that will do calculations for you. You have number (+, -, /, *, %), string, and color operations to do your bidding.</p>

<ol>
  <li>Base font size + 12px = <span>bigger font size</span></li>
  <li>Base font size - 50% = <span>smaller font size</span></li>
  <li>
    <span class="color-1">Color 1</span> + 
    <span class="color-2">Color 2</span> = 
    <span class="new-color">Mix</span>    
  </li>
  <li>
    <span class="width-1"></span>
    <span class="width-2"></span>
  </li>
</ol>

style.scss

@import "compass";
$base-font-size: 12px;
$color-1: red;
$color-2: blue;

h1 {
  font-size: 20px;
}
ol {
  font: 16px/32px Helvetica; // No operation
  li:first-child span{
    font-size: $base-font-size + 12px; 
  }
  li:nth-child(2n) span {
    font-size: $base-font-size / 2px;
  }
  li:nth-child(3) {
    .color-1 {
      color: $color-1;
    }
    .color-2 {
      color: $color-2;
    }
    .new-color {
      color: $color-1 + $color-2;
    }
  }
  li:last-child{
    span{
      background-color: #666;
      display: inline-block;
      height: 25px;
    }
    // ((width / total columns) * columns / width) * 100%
    .width-1 {
       width: ((960 / 12) * 3 / 960) * 100%;
    }
    .width-2 {
      width: ((960 / 12) * 8 / 960) * 100%;
    }
  }
}