- I'm not using Compass
- I prefer to use Breakpoint.scss
- I'm on susy 2.0
I know there are lot of posts with this question but I'm having 0 luck finding any regarding Breakpoint.scss
and Susy 2.0
on this topic.
@import "susy";
@import "breakpoint";
$medium: 800px;
$susy: (
columns: 6,
gutters: 3/4,
gutter-position: split
);
@include breakpoint($medium) {
$susy: layout(12 1/4 split);
}
body {
@include container(show);
@include breakpoint($medium) {
@include container(show);
}
}
Do I have to use susy-breakpoint
or can something like this be achieved?
I want 6 columns at anything at/below 800px and 12 at/above 800px
I'm trying to stay DRY so adding a susy-breakpoint in my styles does not help.
I've also tried below code but I think I just have an error somewhere cause it's not working.
$susy: layout(6 1/4 split);
$small: 400px, 6 1/4 split;
$medium: 800px, 8 1/4 split;
$large: 1000px, 12 1/4 split;
@mixin media($size) {
@include susy-breakpoint($size...) {
@content;
}
}
body {
@include container(show);
@include media($small) {
@include container(show);
}
// debugging. didnt work either
@include susy-breakpoint($small...) {
@include container(show);
}
}