• Diseñador Gráfico
  
• UI developer
• HTML & CSS
• SASS & Compass

<div class="row">
    <div class="span6">
        <h3>About us</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>
    </div>
    <div class="span6">
        <div class="row">
            <div class="span3">
                <h3><a href="#">News Title</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetu elit.</p>
            </div>
            <div class="span3">
                <h3><a href="#">News Title</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetu elit.</p>
            </div>
        </div>
    </div>
</div>

.span6 {
	width: 49%;
}
.span3 {
	width: 23.5%;
} 

@mixin breakpoint($point) {
  @if ($point == phone-portrait) {
    @media only screen and (min-width: 480px) {
      @content;
    }
  } @if ($point == tablet) {
    @media only screen and (min-width: 768px) {
      @content;
    }
  } @else if ($point == desktop) {
    @media only screen and (min-width: 960px) {
      @content;
    }
  }
}

$cols: 12;
$gutter: 2%;

$one_col: (100% - ($gutter * ($cols - 1))) / $cols;
$one_col: (100% - (2% * (12 - 1))) / 12;

$one_col: 6.5%;

@mixin cols($num) {
  width: ($one_col * $num) + ($gutter * ($num - 1));
}
@mixin cols(5) {
  width: (6.5% * 5) + (2% * (5% - 1));
}width: 40.5%;

@mixin sub_cols($num_child, $num_parent) {  $parent_size: ($one_col * $num_parent) + ($gutter * ($num_parent - 1));  $child_size: ($one_col * $num_child) + ($gutter * ($num_child - 1));  margin-left: ($gutter / $parent_size) * 100%;
  width: ($child_size / $parent_size) * 100%;
}

@mixin sub_cols(2, 4) {  $parent_size: (6.5% * 4) + (2% * (4 - 1));  $parent_size: 32%
  $child_size: (6.5% * 2) + (2% * (2 - 1));  $child_size: 15%  margin-left: (2% / 32%) * 100%;  margin-left: 6.25%  width: (15% / 32%) * 100%;
  width: 46.875%;
}

.row {  // IE8 support
  #{enumerate('.span', 1, $cols, '')} {
    float: left;
    margin-left: $gutter;
  }  [class^="span"],
  [class*="span"]{
    float: left;
    margin-left: $gutter;
  }} 

.row {
  @for $i from 1 through $cols {
    .span#{$i} {
      @include cols($i);

      @for $j from 1 through ($i - 1) {
        .span#{$j} {
          @include sub_cols($j, $i);
        }
      }
    }
  }
}

.row {
  > :first-child,
  .row > :first-child {
    margin-left: 0;
  }
} 

.row .span4 .span3 {
  margin-left: 6.25%;
  width: 73.4375%;
}
.row .span5 {
  width: 40.5%;
}
.row .span5 .span1 {
  margin-left: 4.93827%;
  width: 16.04938%;
}

compass create -r susy -u susy

# config.rb
require "susy"

// a 12-column grid
$total-columns  : 12;
// each column is 4em wide
$column-width   : 4em;
// 1em gutters between columns
$gutter-width   : 1em;
// grid-padding equal to gutters 
$grid-padding   : $gutter-width;

$container-style: magic | static | fluid. 

$container-width: <length>

<div class="container">
	<header>
		<a href="" class="logo">Susy Layout</a>
		<nav>
			<ul>
				<li><a href="#">Item1</a></li>
			</ul>
		</nav>
	</header>
	<div class="main">
		<p class="about">Lorem ipsum dolor sit amet.</p>
		<ul class="news">
			<li>
				<h3><a href="#">News Title</a></h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
			</li>
		</ul>
	</div>
	<footer>
		<p>Backcountry 2013</p>
	</footer>
</div>

// Imports

@import "compass";
@import "normalize";
@import "susy";

// Basic Grid

$container-style: fluid;

$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: 1em;

// Alternative layouts
$tablet: 40em 8;
$computer: 60em 12;

$show-grid-backgrounds: true;  

// Imports
@import "base"; 
// Layout
.container {
	@include container;
	@include susy-grid-background;

	@include at-breakpoint($tablet) {
		@include container;
		@include susy-grid-background;
	}
	@include at-breakpoint($computer) {
		@include container;
		@include susy-grid-background;
	}
}

.logo {
	display: block;
	background: gray;

	@include at-breakpoint($tablet) {
		@include span-columns(2);
	}
	@include at-breakpoint($computer) {
		@include span-columns(3);
	}
} 

nav {
	@include at-breakpoint($tablet) {
		@include span-columns(6 omega);
	}
	@include at-breakpoint($computer) {
		@include span-columns(9 omega);
	}
	ul {
		margin: 0;
		padding: 0;
	}
	li {
		@include inline-block;
	}
}  

.about {
	@include at-breakpoint($tablet) {
		@include span-columns(2);
	}
	@include at-breakpoint($computer) {
		@include span-columns(6);
	}
} 

.news {
	@include at-breakpoint($tablet) {
		@include span-columns(6 omega);

		li {
			@include span-columns(2, 6);

			&:last-child {
				@include omega;
			}
		}
	}
}

.news {
	@include at-breakpoint($computer) {
		@include span-columns(6 omega);

		li {
			@include span-columns(2, 6);
		}
	}
}