Operators

SassMeister-input-HTML.html

<h1>Use Math Operators Anywhere!</h1>
<div class="row">
    <div class="column grid_12"><p>12</p></div>
</div>
 
<div class="row">
    <div class="column grid_6"><p>6</p></div>
    <div class="column grid_6"><p>6</p></div>
</div> 

<div class="row">
    <div class="column grid_4"><p>4</p></div>
    <div class="column grid_4"><p>4</p></div>
    <div class="column grid_4"><p>4</p></div>
</div> 

<div class="row">
    <div class="column grid_3"><p>3</p></div>
    <div class="column grid_3"><p>3</p></div>
    <div class="column grid_3"><p>3</p></div>
    <div class="column grid_3"><p>3</p></div>
</div> 

<div class="row">
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
</div> 

<div class="row">
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$columnWidth: 60px;
$gutter: 10px;
 
$allColumns: $columnWidth * 12;
$allGutters: ($gutter * 12);
$totalWidth: $allColumns + $allGutters;

h1,h2,h3{
    text-align: center;
    color: white;
    font-family: Helvetica;
}

body {
    background-color: #505050;
}

.grid_1 { width: $columnWidth; }
.grid_2 { width: ($columnWidth * 2) + ($gutter); }
.grid_3 { width: ($columnWidth * 3) + ($gutter * 2); }
.grid_4 { width: ($columnWidth * 4) + ($gutter * 3); }
.grid_5 { width: ($columnWidth * 5) + ($gutter * 4); }
.grid_6 { width: ($columnWidth * 6) + ($gutter * 5); }
.grid_7 { width: ($columnWidth * 7) + ($gutter * 6); }
.grid_8 { width: ($columnWidth * 8) + ($gutter * 7); }
.grid_9 { width: ($columnWidth * 9) + ($gutter * 8); }
.grid_10 { width: ($columnWidth * 10) + ($gutter * 9); }
.grid_11 { width: ($columnWidth * 11) + ($gutter * 10); }
.grid_12 { width: ($columnWidth * 12) + ($gutter * 11); }

.column {
    margin: $gutter/2 $gutter/2;
    overflow: hidden;
    float: left;
    display: inline;
    background-color: lightsteelblue;
}

.column:hover {
    background-color: black;
}
.row {
    width: $totalWidth;
    margin: 0 auto;
    overflow: hidden;
}
.row .row {
    margin: 0 ($gutter * -1);
    width: auto;
    display: inline-block;
}

p{
    font-family: Helvetica;
    font-size: 12px;
    color: white;
    text-align: center;
}

SassMeister-output.css

h1, h2, h3 {
  text-align: center;
  color: white;
  font-family: Helvetica;
}

body {
  background-color: #505050;
}

.grid_1 {
  width: 60px;
}

.grid_2 {
  width: 130px;
}

.grid_3 {
  width: 200px;
}

.grid_4 {
  width: 270px;
}

.grid_5 {
  width: 340px;
}

.grid_6 {
  width: 410px;
}

.grid_7 {
  width: 480px;
}

.grid_8 {
  width: 550px;
}

.grid_9 {
  width: 620px;
}

.grid_10 {
  width: 690px;
}

.grid_11 {
  width: 760px;
}

.grid_12 {
  width: 830px;
}

.column {
  margin: 5px 5px;
  overflow: hidden;
  float: left;
  display: inline;
  background-color: lightsteelblue;
}

.column:hover {
  background-color: black;
}

.row {
  width: 840px;
  margin: 0 auto;
  overflow: hidden;
}

.row .row {
  margin: 0 -10px;
  width: auto;
  display: inline-block;
}

p {
  font-family: Helvetica;
  font-size: 12px;
  color: white;
  text-align: center;
}

SassMeister-rendered.html

<h1>Use Math Operators Anywhere!</h1>
<div class="row">
    <div class="column grid_12"><p>12</p></div>
</div>
 
<div class="row">
    <div class="column grid_6"><p>6</p></div>
    <div class="column grid_6"><p>6</p></div>
</div> 

<div class="row">
    <div class="column grid_4"><p>4</p></div>
    <div class="column grid_4"><p>4</p></div>
    <div class="column grid_4"><p>4</p></div>
</div> 

<div class="row">
    <div class="column grid_3"><p>3</p></div>
    <div class="column grid_3"><p>3</p></div>
    <div class="column grid_3"><p>3</p></div>
    <div class="column grid_3"><p>3</p></div>
</div> 

<div class="row">
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
    <div class="column grid_2"><p>2</p></div>
</div> 

<div class="row">
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
    <div class="column grid_1"><p>1</p></div>
</div>