Basic BEM CSS Grid

bem-grid.scss

$breakpoint-lrg: 780px;
$breakpoint-med: 450px;
$grid-gutter: 15px;

.grid {
    @extend %clearfix;
    margin-left: -($grid-gutter);

    &__col {
        float: left;
        padding-left: $grid-gutter;
        min-height: 1px;
        width: 100%;

        @for $i from 1 through 12 {
            &--sml-#{$i} {
                width: (100%/12)*$i;
            }
        }

        @media (min-width: $breakpoint-med) {
            @for $i from 1 through 12 {
                &--med-#{$i} {
                    width: (100%/12)*$i;
                }
            }
        }

        @media (min-width: $breakpoint-lrg) {
            @for $i from 1 through 12 {
                &--lrg-#{$i} {
                    width: (100%/12)*$i;
                }
            }
        }

        &--right {
            float: right;
        }
    }
}

clearfix.scss

%clearfix {
	&:before,
	&:after {
	    content: " ";
	    display: table;
	}

	&:after {
    		clear: both;
	}
}