Last active
January 27, 2017 08:34
-
-
Save rolandtoth/e3b7cc9f1cdb36862292deeb82ee56ab to your computer and use it in GitHub Desktop.
simplest-flexbox-grid _fg_grid() mixin
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
/* Usage | |
pass columns list or column number and optionally gutter and padding | |
columns list: 1 2 1 => 4 columns altogether: | |
col 1/4 (25%), then col 2/4 (50%) and finally 1/4 (25%) | |
@include _fg_grid(1 2 1); | |
@include _fg_grid(1 2, 32, 24); | |
@include _fg_grid(1 2, $gutter: 32, $padding: 24); | |
if a number is passed instead of a list the mixin is equivalent to _fg() mixin | |
*/ | |
@mixin _fg_grid($colList, $gutter: $_fg_gutter, $padding: $_fg_padding) { | |
@if type-of($colList) == number { // call _fg() directly | |
@include _fg($colList, $gutter, $padding); | |
} @else if type-of($colList) == list and length($colList) > 1 { | |
$columnCount: 0; | |
@each $i in $colList { // count how many columns are altogether | |
$columnCount: $columnCount + $i; | |
} | |
@include _fg($columnCount, $gutter, $padding); | |
@for $i from 1 through length($colList) { // set child items widths using nth:child() | |
$c: nth($colList, $i); | |
& > :nth-child(#{$i}) { | |
@include _fg_width($c/$columnCount, $gutter); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment