From 5ac4451506da4aad84ace9f7ca57d7073023a936 Mon Sep 17 00:00:00 2001
From: jordan <jordancooperman@gmail.com>
Date: Sat, 12 Nov 2011 15:08:23 -0500
Subject: [PATCH] converted multiple column variables into a single function

---
 frameless.scss | 58 ++++++++++++++++++--------------------------------
 1 file changed, 21 insertions(+), 37 deletions(-)

diff --git a/frameless.scss b/frameless.scss
index 9e27932..35738ee 100644
--- a/frameless.scss
+++ b/frameless.scss
@@ -15,38 +15,22 @@ $em: $font-size;	// Shorthand for outputting ems
 $column: 48;	// The column-width of your grid in pixels
 $gutter: 24;	// The gutter-width of your grid in pixels
 
-
 //
-// Column-widths in variables, in ems
+// Column-widths in a function, in ems
 //
 
- $cols1: #{( 1 * ($column + $gutter) - $gutter) / $em}em; 
- $cols2: #{( 2 * ($column + $gutter) - $gutter) / $em}em;
- $cols3: #{( 3 * ($column + $gutter) - $gutter) / $em}em;
- $cols4: #{( 4 * ($column + $gutter) - $gutter) / $em}em;
- $cols5: #{( 5 * ($column + $gutter) - $gutter) / $em}em;
- $cols6: #{( 6 * ($column + $gutter) - $gutter) / $em}em;
- $cols7: #{( 7 * ($column + $gutter) - $gutter) / $em}em;
- $cols8: #{( 8 * ($column + $gutter) - $gutter) / $em}em;
- $cols9: #{( 9 * ($column + $gutter) - $gutter) / $em}em;
-$cols10: #{(10 * ($column + $gutter) - $gutter) / $em}em;
-$cols11: #{(11 * ($column + $gutter) - $gutter) / $em}em;
-$cols12: #{(12 * ($column + $gutter) - $gutter) / $em}em;
-$cols13: #{(13 * ($column + $gutter) - $gutter) / $em}em;
-$cols14: #{(14 * ($column + $gutter) - $gutter) / $em}em;
-$cols15: #{(15 * ($column + $gutter) - $gutter) / $em}em;
-$cols16: #{(16 * ($column + $gutter) - $gutter) / $em}em;
-
+@function width($cols) {
+    @return (($cols * ($column + $gutter) - $gutter) / $em) + em;
+}
 
 //
-// Column-widths in a function, in ems
+// Column-width as a mixin, in ems
 //
 
-@mixin width ($cols:1) {
-	width: #{($cols * ($column + $gutter) - $gutter) / $em}em;
+@mixin width($cols) {
+    width: width($cols);
 }
 
-
 /*
 	Margin, padding, and border resets
 	except for form elements
@@ -68,23 +52,23 @@ article, aside, figure, footer, header, hgroup, menu, nav, section {
 	adopted from http://necolas.github.com/normalize.css/
 */
 
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, nav, section, audio, canvas, video {
 	display: block;
 }
 
 html {
-	height: 100%; 
-	-webkit-text-size-adjust: 100%; 
+	height: 100%;
+	-webkit-text-size-adjust: 100%;
 	-ms-text-size-adjust: 100%;
 }
 
 	body {min-height: 100%; font-size: 100%;}
 
 sub, sup {
-	font-size: 75%; 
-	line-height: 0; 
-	position: relative; 
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
 	vertical-align: baseline;
 }
 
@@ -92,8 +76,8 @@ sub, sup {
 	sub {bottom: -0.25em;}
 
 pre {
-	white-space: pre; 
-	white-space: pre-wrap; 
+	white-space: pre;
+	white-space: pre-wrap;
 	word-wrap: break-word;
 }
 
@@ -118,13 +102,13 @@ input, textarea, button, select {
 }
 
 	button,
-	html input[type="button"], 
-	input[type="reset"], 
+	html input[type="button"],
+	input[type="reset"],
 	input[type="submit"] {
 	    cursor: pointer;
 	    -webkit-appearance: button;
 	}
-	
+
 	input[type="checkbox"],
 	input[type="radio"] {
 		-webkit-box-sizing: border-box;
@@ -133,7 +117,7 @@ input, textarea, button, select {
 			-ms-box-sizing: border-box;
 				box-sizing: border-box;
 	}
-	
+
 	textarea {overflow: auto;}
 
 
@@ -168,7 +152,7 @@ body {
 */
 
 .ie {
-	
+
 }
 
 
@@ -177,7 +161,7 @@ body {
 	Just change the media queries to activate them.
 	Assuming your base font-size is 16:
 	- the first one zooms out by a factor of (16-2)/16 = 0.875
-	- the second one zooms in by a factor of (16+2)/16 = 1.125  
+	- the second one zooms in by a factor of (16+2)/16 = 1.125
 */
 
 @media screen and (max-width: 1px) {