@charset "UTF-8";

//-----------------------------------------------------
// grid system
//-----------------------------------------------------

$gridFlex:          false !default;
$gridRowClearfix:   false !default; // 如果采用float，子元素清除浮动使用clearfix或overflow
$gridClass:         false !default;

// row
@mixin row() {
	width: 100%;
	@if $gridFlex {
		display: flex;
	} @else if $gridRowClearfix {
		@extend %clearfix;
	} @else {
		overflow: hidden;
	}
}

// col
@mixin col($num, $total: 1) {
	@if not $gridFlex {
		float: left;
	}
	// 如果$total为默认的1，则表示等分的$num分之一
	// 否则计算$num/$total
	@if $total == 1 {
		width: 100% / $num; 
	} @else {
		width: percentage($num / $total);
	}
}

// 是否开启class
@if $gridClass {
	.row {
		@include row;
	}
	.col-1-2 {
		@include col(2);
	}
	.col-1-3 {
		@include col(1, 3);
	}
	.col-2-3 {
		@include col(2, 3);
	}
	.col-1-4 {
		@include col(4);
	}
	.col-3-4 {
		@include col(3, 4);
	}
}