Skip to content

Instantly share code, notes, and snippets.

@danielres
Created November 7, 2010 16:26
Show Gist options
  • Save danielres/666225 to your computer and use it in GitHub Desktop.
Save danielres/666225 to your computer and use it in GitHub Desktop.
COMPASS/SCSS mixin for 2 column CSS layout
@mixin two-columns($prop1, $prop2, $col1 = '.main', $col2 = '.sub'){
$totalwidth : $prop1 + $prop2;
#{$col1} {
@include column(ceil($blueprint-grid-columns * $prop1 / $totalwidth ));
}
#{$col2} {
@include column(floor( $blueprint-grid-columns * (1 - $prop1/($prop1 + $prop2))), true);
}
}
// usage:
@include two-columns(2,1);
// result: will generate CSS code for 2 columns:
// .main -> with 2/3 width of total width
// .sub -> with 1/3 width of total width
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment