Skip to content

Instantly share code, notes, and snippets.

@baamenabar
Created March 12, 2015 19:07
Show Gist options
  • Save baamenabar/1a63f045d6194a1277a7 to your computer and use it in GitHub Desktop.
Save baamenabar/1a63f045d6194a1277a7 to your computer and use it in GitHub Desktop.
Column percentage calculator SASS mixin
/**
* MIXIN n-of-m-columns
* calculates the adequate percentage width and gutter percentage
* @param $n: number of columns to calculate
* @param $m number of total columns in the row
**/
$gridGutter: 24px;
$defaultWidth: 984px;
@mixin n-of-m-columns($n:1, $m:3){
$gutterCount: $m - 1;
$gridGutterPercentage: $gridGutter / $defaultWidth * 100%;
$columnWidth: ($defaultWidth - $gridGutter * ( $gutterCount )) / $m;
$columnWidthPercentage: $columnWidth / $defaultWidth * 100% ;
width: ($columnWidth * $n + ($n - 1) * $gridGutter) / $defaultWidth * 100%;
margin-left: $gridGutterPercentage;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment