Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="test">dasglgbksjb</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

// Px to Em
@function em($font-px, $base: $font-base) {
 @return #{$font-px/$base}em;
}

// Mapping nested list
@function match($haystack, $needle) {
  @each $item in $haystack {
    $index: index($item, $needle);
    @if $index {
        $return: if($index == 1, 2, $index);
        @return nth($item, $return);
    }
  }
  @return false;
}

// Breakpoints
$breakpoints:
    "small"     768,
    "medium"    992,
    "large"     1200;

$bp-small:  match($breakpoints, "small");
$bp-medium: match($breakpoints, "medium");
$bp-large:  match($breakpoints, "large");

// Layout
$spacing: 10;
$column : 12; // # of grid columns

 $fix-mq: false !default;

// Breakpoints mixin w/ fixed fallaback
@mixin bp($point) {
    @if $fix-mq {
        @if $fix-mq >= $point {
            @content;
        }
    }
    @else {
        @media screen and (min-width: em($point, 16)) {
            @content;
        }
    }
}

.clearfix {
    &:after {
        display: table;
        clear: both;
        content: "";
    }
}

.g-wrapper {
    @extend .clearfix;
    position: relative;
}

.g {
    position: relative;
    min-height: 1px;
    padding: 0 #{$spacing}px;;
    float: left;
}

// Generiranje full Bootstrap grida
@each $point in $breakpoints {

    $bp-size: nth($point, 1);
    $bp-value: nth($point, 2);

    @for $i from 1 through $column {
        @include bp($bp-value) {
            .g-#{$bp-size}-#{$i} {
                width: percentage($i/$column);
            }
        }
    }
}

SassMeister-output.css

.clearfix:after, .g-wrapper:after {
  display: table;
  clear: both;
  content: "";
}

.g-wrapper {
  position: relative;
}

.g {
  position: relative;
  min-height: 1px;
  padding: 0 10px;
  float: left;
}

@media screen and (min-width: 48em) {
  .g-small-1 {
    width: 8.33333%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-2 {
    width: 16.66667%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-3 {
    width: 25%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-4 {
    width: 33.33333%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-5 {
    width: 41.66667%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-6 {
    width: 50%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-7 {
    width: 58.33333%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-8 {
    width: 66.66667%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-9 {
    width: 75%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-10 {
    width: 83.33333%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-11 {
    width: 91.66667%;
  }
}
@media screen and (min-width: 48em) {
  .g-small-12 {
    width: 100%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-1 {
    width: 8.33333%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-2 {
    width: 16.66667%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-3 {
    width: 25%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-4 {
    width: 33.33333%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-5 {
    width: 41.66667%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-6 {
    width: 50%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-7 {
    width: 58.33333%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-8 {
    width: 66.66667%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-9 {
    width: 75%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-10 {
    width: 83.33333%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-11 {
    width: 91.66667%;
  }
}
@media screen and (min-width: 62em) {
  .g-medium-12 {
    width: 100%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-1 {
    width: 8.33333%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-2 {
    width: 16.66667%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-3 {
    width: 25%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-4 {
    width: 33.33333%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-5 {
    width: 41.66667%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-6 {
    width: 50%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-7 {
    width: 58.33333%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-8 {
    width: 66.66667%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-9 {
    width: 75%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-10 {
    width: 83.33333%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-11 {
    width: 91.66667%;
  }
}
@media screen and (min-width: 75em) {
  .g-large-12 {
    width: 100%;
  }
}

SassMeister-rendered.html

<div class="test">dasglgbksjb</div>