Generated by SassMeister.com.

SassMeister-input-HTML.html

  <div class="container">

    <h1>10-колоночный шаблон с вложенностью блоков</h1>

    <!-- Column 1 -->
    <div class="column column_1">
      <h2>Колонка 1</h2>
    </div>

    <!-- Column 2 -->
    <div class="column column_2">
      <h2>Колонка 2</h2>

      <div class="column column_2_1_1">
        <h2>Колонка 2-1-1</h2>
      </div>
      <div class="column column_2_1_2">
        <h2>Колонка 2-1-2</h2>
      </div>

      <div class="column column_2_2_1">
        <h2>Колонка 2-2-1</h2>
      </div>
      <div class="column column_2_2_2">
        <h2>Колонка 2-2-2</h2>
        <div class="column_2_3_1">
          <h2>Колонка 2-3-1</h2>
        </div>
        <div class="column_2_3_2">
          <h2>Колонка 2-3-2</h2>
        </div>
        <div class="column_2_4">
          <h2>Колонка 2-4</h2>
        </div>
      </div>
    </div><!-- end AG2 -->

    <!-- Column 3 -->
    <div class="column column_3">
      <h2>Колонка 3</h2>
    </div>

  </div>

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v)
// Breakpoint (v)
// Susy (v)
// ----

@import "breakpoint";
@import "compass/reset";
@import "susy";
@import "compass/utilities/general/clearfix";

// Susy custom settings
$susy:(
  global-box-sizing: border-box,
  use-custom: (rem: true)
);

@include border-box-sizing;

h1,h2{
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  padding: 1.8rem 0;
}
div[class^="column"]{
  margin-top: .5rem;
}

.container{
  background-color: #fbeecb;
  @include container(1140px);
  @include clearfix;

  /* Column 1 & Column 3
  ---------------------------*/
  .column_1,.column_3{
    background-color: #71dad2;
  }

  /* Column 2
  ----------------------------*/
  .column_2{
    background-color: #fae7b3;
    .column_2_1_1,.column_2_1_2{
      background-color: #ee9e9c;
    }
    .column_2_2_1{
      background-color: #f09671;
    }
    .column_2_2_2{
      background-color: #f6d784;
      .column_2_3_1,.column_2_3_2{
        background-color: #ee9e9c;
      }
      .column_2_4{
        background-color: #ea9fc3;
      }
    }
  }


  /* Tablet View
  ----------------------------*/
  .column_1,.column_3{
    @include susy-breakpoint(600px,6){
      @include span(2 last);
    }
  }
  .column_2{
    @include susy-breakpoint(600px,6){
      @include span(4);
      @include clearfix;
      .column_2_1_1,.column_2_1_2{
        @include span(3);
      }
      .column_2_1_2{
        @include last;
      }
      .column_2_2_1,.column_2_2_2,.column_2_4{
        @include span(full);
      }
      .column_2_2_2{
        @include clearfix;
        .column_2_3_1,.column_2_3_2{
          @include span(2 of 4);
        }
        .column_2_3_2{
          @include last;
        }
        .column_2_4{
          clear: both;
        }
      }
    }
  }


  /* Desktop View
  -----------------------------*/
  .column_1,.column_3{
    @include breakpoint(900px){
      @include span(2 of 10);
    }
  }
  .column_3{
    @include breakpoint(900px){
      @include last;
    }
  }
  .column_2{
    @include breakpoint(900px){
      @include span(6 of 10);
      @include clearfix;
      .column_2_1_1,.column_2_1_2{
        @include span(3 of 6);
      }
      .column_2_1_2{
        @include last;
      }
      .column_2_2_1{
        @include span(2 of 6);
      }
      .column_2_2_2{
        @include span(4 of 6 last);
        @include clearfix;
        .column_2_3_1,.column_2_3_2{
          @include span(2 of 4);
        }
        .column_2_3_2{
          @include last;
        }
        .column_2_4{
          @include span(full);
          clear: both;
        }
      }
    }
  }

}

SassMeister-output.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

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

h1, h2 {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  padding: 1.8rem 0;
}

div[class^="column"] {
  margin-top: .5rem;
}

.container {
  background-color: #fbeecb;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  *zoom: 1;
  /* Column 1 & Column 3
  ---------------------------*/
  /* Column 2
  ----------------------------*/
  /* Tablet View
  ----------------------------*/
  /* Desktop View
  -----------------------------*/
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}
.container .column_1, .container .column_3 {
  background-color: #71dad2;
}
.container .column_2 {
  background-color: #fae7b3;
}
.container .column_2 .column_2_1_1, .container .column_2 .column_2_1_2 {
  background-color: #ee9e9c;
}
.container .column_2 .column_2_2_1 {
  background-color: #f09671;
}
.container .column_2 .column_2_2_2 {
  background-color: #f6d784;
}
.container .column_2 .column_2_2_2 .column_2_3_1, .container .column_2 .column_2_2_2 .column_2_3_2 {
  background-color: #ee9e9c;
}
.container .column_2 .column_2_2_2 .column_2_4 {
  background-color: #ea9fc3;
}
@media (min-width: 600px) {
  .container .column_1, .container .column_3 {
    width: 31.03448%;
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .container .column_2 {
    width: 65.51724%;
    float: left;
    margin-right: 3.44828%;
    overflow: hidden;
    *zoom: 1;
  }
  .container .column_2 .column_2_1_1, .container .column_2 .column_2_1_2 {
    width: 48.27586%;
    float: left;
    margin-right: 3.44828%;
  }
  .container .column_2 .column_2_1_2 {
    float: right;
    margin-right: 0;
  }
  .container .column_2 .column_2_2_1, .container .column_2 .column_2_2_2, .container .column_2 .column_2_4 {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
  .container .column_2 .column_2_2_2 {
    overflow: hidden;
    *zoom: 1;
  }
  .container .column_2 .column_2_2_2 .column_2_3_1, .container .column_2 .column_2_2_2 .column_2_3_2 {
    width: 47.36842%;
    float: left;
    margin-right: 5.26316%;
  }
  .container .column_2 .column_2_2_2 .column_2_3_2 {
    float: right;
    margin-right: 0;
  }
  .container .column_2 .column_2_2_2 .column_2_4 {
    clear: both;
  }
}
@media (min-width: 900px) {
  .container .column_1, .container .column_3 {
    width: 18.36735%;
    float: left;
    margin-right: 2.04082%;
  }
}
@media (min-width: 900px) {
  .container .column_3 {
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 900px) {
  .container .column_2 {
    width: 59.18367%;
    float: left;
    margin-right: 2.04082%;
    overflow: hidden;
    *zoom: 1;
  }
  .container .column_2 .column_2_1_1, .container .column_2 .column_2_1_2 {
    width: 48.27586%;
    float: left;
    margin-right: 3.44828%;
  }
  .container .column_2 .column_2_1_2 {
    float: right;
    margin-right: 0;
  }
  .container .column_2 .column_2_2_1 {
    width: 31.03448%;
    float: left;
    margin-right: 3.44828%;
  }
  .container .column_2 .column_2_2_2 {
    width: 65.51724%;
    float: right;
    margin-right: 0;
    overflow: hidden;
    *zoom: 1;
  }
  .container .column_2 .column_2_2_2 .column_2_3_1, .container .column_2 .column_2_2_2 .column_2_3_2 {
    width: 47.36842%;
    float: left;
    margin-right: 5.26316%;
  }
  .container .column_2 .column_2_2_2 .column_2_3_2 {
    float: right;
    margin-right: 0;
  }
  .container .column_2 .column_2_2_2 .column_2_4 {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    clear: both;
  }
}

SassMeister-rendered.html

  <div class="container">

    <h1>10-колоночный шаблон с вложенностью блоков</h1>

    <!-- Column 1 -->
    <div class="column column_1">
      <h2>Колонка 1</h2>
    </div>

    <!-- Column 2 -->
    <div class="column column_2">
      <h2>Колонка 2</h2>

      <div class="column column_2_1_1">
        <h2>Колонка 2-1-1</h2>
      </div>
      <div class="column column_2_1_2">
        <h2>Колонка 2-1-2</h2>
      </div>

      <div class="column column_2_2_1">
        <h2>Колонка 2-2-1</h2>
      </div>
      <div class="column column_2_2_2">
        <h2>Колонка 2-2-2</h2>
        <div class="column_2_3_1">
          <h2>Колонка 2-3-1</h2>
        </div>
        <div class="column_2_3_2">
          <h2>Колонка 2-3-2</h2>
        </div>
        <div class="column_2_4">
          <h2>Колонка 2-4</h2>
        </div>
      </div>
    </div><!-- end AG2 -->

    <!-- Column 3 -->
    <div class="column column_3">
      <h2>Колонка 3</h2>
    </div>

  </div>