Cacher is the code snippet organizer for pro developers

// ----
// libsass (v3.2.5)
// ----

/* Brakepoints */
$breakpoints: (
  mobile: 480px, 
  tablet: 768px, 
  laptop: 992px, 
  desktop: 1200px
);

/* Column names */
$col: (
  mobile: mob, 
  tablet: tab, 
  laptop: lap, 
  desktop: desk
);

/* Columns */
$number-of-colums: 2;



// Grid brakepoints test
@each $value, $key  in $breakpoints {
    // now looping on sections
  .#{$key} {
    background: $key;
    
      @for $i from 1 through $number-of-colums {
      .column-#{$i} { 
			  width: 100% / $number-of-colums * $i;  
      }
      }
  }
}

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

@each $key, $value in $map {
  .element--#{$key} {
    background: $value;
  }
}

/* Brakepoints */
/* Column names */
/* Columns */
.480px {
  background: 480px;
}

.480px .column-1 {
  width: 50%;
}

.480px .column-2 {
  width: 100%;
}

.768px {
  background: 768px;
}

.768px .column-1 {
  width: 50%;
}

.768px .column-2 {
  width: 100%;
}

.992px {
  background: 992px;
}

.992px .column-1 {
  width: 50%;
}

.992px .column-2 {
  width: 100%;
}

.1200px {
  background: 1200px;
}

.1200px .column-1 {
  width: 50%;
}

.1200px .column-2 {
  width: 100%;
}

.element--key1 {
  background: value1;
}

.element--key2 {
  background: value2;
}

.element--key3 {
  background: value3;
}