示範如何用 scss 的 mixin 寫出一個可任意輸入數值的 grid system

grid.scss

@mixin grid($columns,$col-width,$gutter) {
	width: ($col-width * $columns) + ($gutter * $columns);
	.column {
		margin: 0 $gutter $gutter 0;
		float: left;
	}
	@for $i from 1 through $columns {
		.col#{$i} {
			width: ($col-width * $i) + ($gutter * ($i - 1));
		}
	}
}


// example:

#main {
	// 我想要10欄，每欄120px寬，欄與欄間隔5px距離
	@include grid(10, 120px, 5px);
}


// 會產生如下結果:

#main {
  width: 1250px;
}
#main .column {
  margin: 0 5px 5px 0;
  float: left;
}
#main .col1 {
  width: 120px;
}
#main .col2 {
  width: 245px;
}
#main .col3 {
  width: 370px;
}
#main .col4 {
  width: 495px;
}
#main .col5 {
  width: 620px;
}
#main .col6 {
  width: 745px;
}
#main .col7 {
  width: 870px;
}
#main .col8 {
  width: 995px;
}
#main .col9 {
  width: 1120px;
}
#main .col10 {
  width: 1245px;
}


// html 就可以如此使用:

<div id="main">
	<div class="column col3">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
	<div class="column col7">
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
</div>

謝謝分享