Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
  <div class="col">This is some content</div>
  <div class="other-col">This is some more content</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

@function grid-width($count, $gutter, $width) {
  $grid-width: ($count - 1) * $gutter + ($count * $width);
  @return $grid-width;
}

@function context-width($context, $width, $gutter) {
  $context-width: $context * ($width + $gutter);
  @return $context-width;
}

@mixin the-grid($count, $context: 12, $width: 60, $gutter: 20) {
    $grid-width : grid-width($count, $gutter, $width);
    $context-width : context-width($context, $width, $gutter);
    
    width: percentage($grid-width / $context-width);
}

*, *:after, *:before {
  box-sizing: border-box;
}

.block {
  @include the-grid(10);
  color: rgb(255, 243, 0);
}

[class*='col-'] {
  float: left;
}
//The parent element will collapse to zero height since 
//it has only floated children. Let's fix that by clearing it. 
//These days all you need is this:
.grid:after {
  content: "";
  display: table;
  clear: both;
}


// USING STRINGS
$words: 'this is the first string';

.block {
  $index : str-index($words, "the");
  content: str-insert($words, "not ", $index);
}

// using inspect to get string
.block { 
  $red : red;
  $blue : #0000ff;
  $left : 20px;
  $padding : 50px;
  border: inspect($red) + " " + inspect($blue);
  color: $red + $blue;
  left: $left + $padding;
  padding: inspect($left) + " " +inspect($padding);
}

// COMPARE Values
$ems: 2em;
$pixels: 5px;
$percents: 25%;
$inches: 1in;

@function add-if-comparable($alpha, $bravo) {
  /* Add your code here! */
  $alphaUnit : unit($alpha);
  $bravoUnit : unit($bravo);
  @if $alphaUnit == $bravoUnit {
    $sum : $alpha + $bravo;
    @return $sum;
  } @else {
    @return "error";
  }
}

.block {
  blah: inspect($pixels) + inspect($percents);
  font-size: add-if-comparable($ems, $ems);
  content: add-if-comparable($pixels, $percents);
}

SassMeister-output.css

*, *:after, *:before {
  box-sizing: border-box;
}

.block {
  width: 81.25%;
  color: #fff300;
}

[class*='col-'] {
  float: left;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.block {
  content: "this is not the first string";
}

.block {
  border: red #0000ff;
  color: magenta;
  left: 70px;
  padding: 20px 50px;
}

.block {
  blah: 5px25%;
  font-size: 4em;
  content: "error";
}

SassMeister-rendered.html

<div>
  <div class="col">This is some content</div>
  <div class="other-col">This is some more content</div>
</div>