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 'susy';

$columns: 12;
$gutter-width: 22px;
$column-width: 90px;

$susy: (
        math: fluid,
        container: 100%,
        container-position: center,
        columns: $columns,
        gutters: $gutter-width/$column-width,
        column-width: $column-width,
        gutter-position: inside-static,
        global-box-sizing: border-box
);

$susy-desktop: (auto);

$breakpoint-default-media: 'all';
$breakpoint-default-feature: 'min-width';
$breakpoint-default-pair: 'width';
$breakpoint-to-ems: false;

$mobile: 640px;
$tablet: 1024px;
$laptop: 1440px;
$desktop: 1920px;

$mobile-only: 0 $mobile;
$tablet-only: $mobile+1 $tablet;
$laptop-only: $tablet+1 $laptop;
$desktop-only: $laptop+1 $desktop;

.test {
  -debug: after susy-breakpoint() call;
  -debug: mobile $mobile;
  -debug: tablet-only $tablet-only;
}

.some-block {
    display: block;

    @include susy-breakpoint($mobile, $susy-desktop) {
        display: inline-block;
    }

    @include susy-breakpoint($tablet-only, $susy-desktop) {
        display: none;
    }
}

.test {
  -debug: after susy-breakpoint() call;
  -debug: mobile $mobile;
  -debug: tablet-only $tablet-only;
}

.another-block {
    display: block;

    @include susy-breakpoint($mobile, $susy-desktop) {
        display: inline-block;
    }

    @include susy-breakpoint($tablet-only, $susy-desktop) {
        display: none;
    }
}

SassMeister-output.css

.test {
  -debug: after susy-breakpoint() call;
  -debug: mobile 640px;
  -debug: tablet-only 641px 1024px;
}

.some-block {
  display: block;
}

@media (min-width: 640px) {
  .some-block {
    display: inline-block;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .some-block {
    display: none;
  }
}

.test {
  -debug: after susy-breakpoint() call;
  -debug: mobile 640px;
  -debug: tablet-only 641px 1024px;
}

.another-block {
  display: block;
}

@media (min-width: 640px) {
  .another-block {
    display: inline-block;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .another-block {
    display: none;
  }
}

SassMeister-rendered.html

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