_spacing.scss

$spaces: 10;
$spaces-step: 5px;

@mixin make-spaces ($class) {
    .space-#{$class}-0 {
        margin-bottom: 0;
    }
    
    @for $i from 1 through $spaces {
        .space-#{$class}-#{$i} {
            margin-bottom: $i * $spaces-step;
        }
    }
}
 
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include make-spaces(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
    @include make-spaces(sm);
}
 
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
    @include make-spaces(md);
}
 
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
    @include make-spaces(lg);
}

spacing.css

.space-xs-0 {
  margin-bottom: 0; }

.space-xs-1 {
  margin-bottom: 5px; }

.space-xs-2 {
  margin-bottom: 10px; }

.space-xs-3 {
  margin-bottom: 15px; }

.space-xs-4 {
  margin-bottom: 20px; }

.space-xs-5 {
  margin-bottom: 25px; }

.space-xs-6 {
  margin-bottom: 30px; }

.space-xs-7 {
  margin-bottom: 35px; }

.space-xs-8 {
  margin-bottom: 40px; }

.space-xs-9 {
  margin-bottom: 45px; }

.space-xs-10 {
  margin-bottom: 50px; }

@media (min-width: 768px) {
  .space-sm-0 {
    margin-bottom: 0; }

  .space-sm-1 {
    margin-bottom: 5px; }

  .space-sm-2 {
    margin-bottom: 10px; }

  .space-sm-3 {
    margin-bottom: 15px; }

  .space-sm-4 {
    margin-bottom: 20px; }

  .space-sm-5 {
    margin-bottom: 25px; }

  .space-sm-6 {
    margin-bottom: 30px; }

  .space-sm-7 {
    margin-bottom: 35px; }

  .space-sm-8 {
    margin-bottom: 40px; }

  .space-sm-9 {
    margin-bottom: 45px; }

  .space-sm-10 {
    margin-bottom: 50px; } }
@media (min-width: 992px) {
  .space-md-0 {
    margin-bottom: 0; }

  .space-md-1 {
    margin-bottom: 5px; }

  .space-md-2 {
    margin-bottom: 10px; }

  .space-md-3 {
    margin-bottom: 15px; }

  .space-md-4 {
    margin-bottom: 20px; }

  .space-md-5 {
    margin-bottom: 25px; }

  .space-md-6 {
    margin-bottom: 30px; }

  .space-md-7 {
    margin-bottom: 35px; }

  .space-md-8 {
    margin-bottom: 40px; }

  .space-md-9 {
    margin-bottom: 45px; }

  .space-md-10 {
    margin-bottom: 50px; } }
@media (min-width: 1200px) {
  .space-lg-0 {
    margin-bottom: 0; }

  .space-lg-1 {
    margin-bottom: 5px; }

  .space-lg-2 {
    margin-bottom: 10px; }

  .space-lg-3 {
    margin-bottom: 15px; }

  .space-lg-4 {
    margin-bottom: 20px; }

  .space-lg-5 {
    margin-bottom: 25px; }

  .space-lg-6 {
    margin-bottom: 30px; }

  .space-lg-7 {
    margin-bottom: 35px; }

  .space-lg-8 {
    margin-bottom: 40px; }

  .space-lg-9 {
    margin-bottom: 45px; }

  .space-lg-10 {
    margin-bottom: 50px; } }