Responsive

Для http://toster.ru/q/149925

by Michael Danilov

HTML

<link rel="stylesheet" href="https://rawgit.com/necolas/normalize.css/master/normalize.css">
<section class="container_12">
  <div class="grid-sm_6 grid-md_4 grid-lg_3">Блок 1</div>
  <div class="grid-sm_6 grid-md_4 grid-lg_3">Блок 2</div>
  <div class="grid-md_4 visible-md grid-lg_3">Блок 3</div>
  <div class="grid-lg_3 visible-lg">Блок 4</div>
</section>

SCSS

*, *:before, *:after {
  box-sizing: border-box;
}

$cols = 12;
$widthSm = 1024px;
$widthMd = 1200px;
$widthLg = 1600px;

// sm
body {
  min-width: $widthSm;
}

$widthContainer = $widthSm;
$colWidth = $widthContainer / $cols;

.container_12 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: $widthContainer;
}

@for $i from 1 through $cols {
  .grid-sm_#{$i} {
    border: 1px solid #000;
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    text-align: center;
    width: $colWidth * $i - 20px;
  }
}

.visible-md,
.visible-lg {
  display: none;
}

// md
@media (min-width: $widthMd) {
  body {
    min-width: $widthMd;
  }

  .container_12 {
    width: $widthMd;
  }

  $widthContainer = $widthMd;
  $colWidth = $widthContainer / $cols;

  .container_12 {
    width: $widthContainer;
  }

  @for $i from 1 through $cols {

    .grid-md_#{$i} {
      border: 1px solid #000;
      display: inline;
      float: left;
      margin-left: 10px;
      margin-right: 10px;
      position: relative;
      text-align: center;
      width: $colWidth * $i - 20px;
    }

  }

  .visible-md {
    display: block;
  }
}

// lg
@media (min-width: $widthLg) {
  body {
    min-width: $widthLg;
  }

  $widthContainer = $widthLg;
  $colWidth = $widthContainer / $cols;

  .container_12 {
    width: $widthContainer;
  }

  @for $i from 1 through $cols {

    .grid-lg_#{$i} {
      border: 1px solid #000;
      display: inline;
      float: left;
      margin-left: 10px;
      margin-right: 10px;
      position: relative;
      text-align: center;
      width: $colWidth * $i - 20px;
    }

  }

  .visible-lg {
    display: block;
  }
}