Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="page">
<section class="content">content</section>
<aside class="sidebar">sidebar</aside>
</div>
// ----
// 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);
}
}
}
@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%;
}
}
<div class="page">
<section class="content">content</section>
<aside class="sidebar">sidebar</aside>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.