npm install gulp-sass --save-dev

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('./style/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./style'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./style/**/*.scss', ['sass']);
});

$colors: (
    brand: #f03,
    brand-hover: #f00,
    border: #eaeaea,
    primary: #333
);

.nav {
    color: map-get($colors, brand);
}

@each $key, $value in $colors {
    .color-#{$key} {
        color: $value;
    }
}

$grids = 12;

@for $i from 1 through $grids {
    .col-md-#{$i} {
        width: ($i / $grids) * 100%;
    }
}

@for $i from 1 to $grids {
    .col-sm-#{$i} {
        width: ($i / $grids) * 100%;
    }
}

// breakpoints map
$breakpoints: (
  xs: 32rem,
  sm: 48rem,
  md: 72rem,
  lg: 96rem,
  xl: 102rem,
  xx: 120rem
);

// media query mixin
@mixin break($size) {
  @media (min-width: map-get($breakpoints, $size)) {
    @content;
  }
}

// number of columns variable
$items: 12;

// grid container
.grid {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 1rem;
}

// loop over the breakpoints
@each $key, $value in $breakpoints {
  @for $i from 1 through $items {
    .grid__item--#{$key}-span-#{$i} {
      flex: 0 0 100%;
      @include break($key) {
        flex: 0 0 #{$i / $items * 100%};
      }
    }
  }
}