lucasan/SassMeister-input-HTML.html

## SassMeister-input-HTML.html
<html>
<head>
  <title>A title</title>
</head>
  <body>
  <div class="content">
  <h1>A heading</h1>
    <p>A text</p>
    </div>
  </body>
</html>

## SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

@function get-col-width($width, $columns, $number){
      @return ($width / $columns) * $number;
  }

  $columns: 6;

  @for $i from 1 through $columns {
      .columns-#{$i} {
          width: get-col-width(960px, $columns, $i);

          //Not useful at all, just as an example
          @if $i < $columns {
            float: left;
          }
          @else {
            float: right;
          }
      }
  }

## SassMeister-output.css
.columns-1 {
  width: 160px;
  float: left;
}

.columns-2 {
  width: 320px;
  float: left;
}

.columns-3 {
  width: 480px;
  float: left;
}

.columns-4 {
  width: 640px;
  float: left;
}

.columns-5 {
  width: 800px;
  float: left;
}

.columns-6 {
  width: 960px;
  float: right;
}

## SassMeister-rendered.html
<html>
<head>
  <title>A title</title>
</head>
  <body>
  <div class="content">
  <h1>A heading</h1>
    <p>A text</p>
    </div>
  </body>
</html>
	<html>
	<head>
	<title>A title</title>
	</head>
	<body>
	<div class="content">
	<h1>A heading</h1>
	<p>A text</p>
	</div>
	</body>
	</html>
	// ----
	// Sass (v3.3.4)
	// Compass (v1.0.0.alpha.18)
	// ----

	@function get-col-width($width, $columns, $number){
	@return ($width / $columns) * $number;
	}

	$columns: 6;

	@for $i from 1 through $columns {
	.columns-#{$i} {
	width: get-col-width(960px, $columns, $i);

	//Not useful at all, just as an example
	@if $i < $columns {
	float: left;
	}
	@else {
	float: right;
	}
	}
	}
	.columns-1 {
	width: 160px;
	float: left;
	}

	.columns-2 {
	width: 320px;
	float: left;
	}

	.columns-3 {
	width: 480px;
	float: left;
	}

	.columns-4 {
	width: 640px;
	float: left;
	}

	.columns-5 {
	width: 800px;
	float: left;
	}

	.columns-6 {
	width: 960px;
	float: right;
	}