Начинаем с организации файлов. Создаем два новых файла _normalize.scss и _main.scss, куда выносим соответствующие стили, и импортируем их в style.scss, который теперь является камнем преткновения всех наших стилей:

@import "normalize";
@import "main";

Дальше рассматриваем циклы и пишем первый пример:

	$width: 960px;
	$gutter: 20px;
	$columns: 12;
	$column_width: $width/$columns;

	.grid {
		display: inline;
		float:left;
		margin-left: $gutter/ 2;
		margin-right: $gutter/2;
	}

	@for $i from 1 through $columns {
		.grid_#{$i} {
			@extend .grid;
			width: $i * $column_width - $gutter;
		}
	}

После компиляции этого кода у нас получится 12 css правил, для каждой из наших грид-колонок.

Теперь давайте рассмотрим, как пишутся условия в SASS. Для этого напишем две новые переменные с булевым значением ($prefix и $push) , по которым и будем проверять наши условия. Итак добавим условия в наш цикл:

	$width: 960px;
	$gutter: 20px;
	$columns: 12;
	$column_width: $width/$columns;
	$prefix : false;
	$push: true;

	@for $i from 1 through $columns {
		.grid_#{$i} {
			@extend .grid;
			width: $i * $column_width - $gutter;
		}

                /* если переменная $prefix равна true, то создадим правила для prefix и suffix*/
		@if $prefix == true {
			.prefix_#{$i} {
				padding-left: $i * $column_width;
			}

			.suffix_#{$i} {
				padding-right: $i * $column_width;
			}
		}


                /* если переменная $push равна true, то создадим правила для push и pull */
		@if $push == true {
			.push_#{$i} {
				left: $i * $column_width;
			}

			.pull_#{$i} {
				left: -$i * $column_width;
			}
		}

	}

Ну и на сладкое напишем нашу собственную функцию генерящюю грид. Назовем её, как бы это не странно звучало…grid:

 /* вынесем все переменные, которые хотим сделать регулируемыми в аргументы по умолчанию */
@mixin grid(
	$width: 960px,
	$gutter: 20px,
	$columns: 12,
	$prefix : false,
	$push: true
) {

	$column_width: $width/$columns;

	.grid {
		display: inline;
		float:left;
		margin-left: $gutter/ 2;
		margin-right: $gutter/2;
	}



	@for $i from 1 through $columns {
		.grid_#{$i} {
			@extend .grid;
			width: $i * $column_width - $gutter;
		}


		@if $prefix == true {
			.prefix_#{$i} {
				padding-left: $i * $column_width;
			}

			.suffix_#{$i} {
				padding-right: $i * $column_width;
			}
		}



		@if $push == true {
			.push_#{$i} {
				left: $i * $column_width;
			}

			.pull_#{$i} {
				left: -$i * $column_width;
			}
		}

	}

}

Теперь вынесем нашу функцию в отдельный файл _grid.scss и подключим в style.scss. Чтобы вызвать функцию используется следующий синтаксис @include func_name;:

@import "normalize";
@import "main";
@import "grid";

@include grid;

Если мы хотим передать в функцию, какие то аргументы, то делаем это следующим образом:

@include grid(1140px, 40px, 16);

На этом сегодня все.

Источник: