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 '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;
}
}
.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;
}
}
<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.