Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.2)
// ----

@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);
		}
	}
}

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%;
  }
}