반응형 디자인

코드

$gutter : 20px;
$sm-columns : 4;
$sm-margin : 5px;

.container {
	width: 100%;
	padding : 0 $sm-margin;
	margin : 0 auto;

	.row {
	display:flex;
	flex-wrap : wrap;
 }

	[class^='col-']{ // "col- 로 시작하는 클래스 모두 를 선택"
		padding : 0 $gutter/2
 }

	@for $i from 1 through $sm-columns{
		@col-sm-#{$i}{
			width: percentage($i / $sm-columns);
		}
  }
}