Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="page">
  <section class="content">content</section>
  <aside class="sidebar">sidebar</aside>
</div>

SassMeister-input.scss

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

@import 'breakpoint';
@import 'susy';

$susy:(
    container:1200px,
    math:fluid,
    output:isolate,
    global-box-sizing:border-box,
    use-custom:(
        clearfix:true
        )
    );

$palm:569px;
$lap:768px;
$desk:1024px;

$up-to-palm:max-width ($palm - 1px);
$palm-to-lap:$palm ($lap - 1px);
$up-to-lap:max-width ($lap - 1px);
$lap-and-up:$lap;
$lap-to-desk:$lap ($desk - 1px);
$up-to-desk:max-width ($desk - 1px);
$desk-and-up:$desk;

$layouts:(
    $up-to-palm:2 1/8,
    $palm-to-lap:3 1/8,
    $lap-to-desk:6 1/6,
    $desk-and-up:12 1/4
    );

@mixin layout-breakpoint($query) {
    @include susy-breakpoint($query, map-get($layouts, $query)) {
        @content;
        }
    }

.header {
    @include layout-breakpoint($palm-to-lap) {
        &__logo {
            @include span(1 at 1);
            }
        &__menu {
            @include span(2 at 2);
            }
        &__search {
            @include span(3 at 1 break);
            }
        }
    }

.layout {
    @include layout-breakpoint($palm-to-lap) {
        &__aside {
            @include span(1 at 1);
            }
        &__content {
            @include span(2 at 2);
            }
        }
    }

SassMeister-output.css

@media (min-width: 569px) and (max-width: 767px) {
  .header__logo {
    width: 30.76923%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
  }
  .header__menu {
    width: 65.38462%;
    float: left;
    margin-left: 34.61538%;
    margin-right: -100%;
  }
  .header__search {
    clear: both;
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
  }
}

@media (min-width: 569px) and (max-width: 767px) {
  .layout__aside {
    width: 30.76923%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
  }
  .layout__content {
    width: 65.38462%;
    float: left;
    margin-left: 34.61538%;
    margin-right: -100%;
  }
}

SassMeister-rendered.html

<div class="page">
  <section class="content">content</section>
  <aside class="sidebar">sidebar</aside>
</div>