Created
April 5, 2015 23:53
-
-
Save quattromani/81e00eaaf8eaa3bb6a75 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
// Column / Grid Control | |
$width: 100%; // total with of page | |
$site-column-count: 12 !default; // number of columns | |
$site-gutter-width: 2% !default; // margin between columns | |
$marginless: 0; | |
$col-width: ($width - ($site-gutter-width * ($site-column-count - 1))) / $site-column-count; | |
$col-total-width: $col-width + $site-gutter-width; | |
$marginless-col-width: $width / $site-column-count; | |
@mixin col($n: 1) { | |
float: left; | |
@include span($n); | |
} | |
@mixin span($n: 1) { | |
width: ($n * $col-width) + (($n - 1) * $site-gutter-width); | |
@if $n == $site-column-count { | |
margin-left: 0; | |
} @else { | |
margin-left: $site-gutter-width; | |
} | |
} | |
$columns: ( | |
full: 1, | |
half: 2, | |
third: 3, | |
fourth: 4, | |
fifth: 5, | |
sixth: 6, | |
seventh: 7, | |
eighth: 8, | |
ninth: 9, | |
tenth: 10, | |
eleventh: 11, | |
twelfth: 12 | |
); | |
@each $column, $width in $columns { | |
@mixin #{$column} { | |
@include col($site-column-count / $width); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Invalid CSS after " @mixin ": expected identifier, was "#{$column} {" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment