0

Help me out you sassy susy's, I am at my breaking point! I am trying to make the most efficient layout for my project, and I have come across something I havn't been able to figure out with Susy/breakpoint.

I want the layout columns to change at the breakpoints and not have to change all the individual spans of the div's (as there will be many different span widths with this way. Instead of just 1 and changing 3 or 4 different column layouts).

Right now the only way I was able to get this to work was by changing the spans of the divs and keeping the columns unchanged, but I would like the divs to always stay the same size and then just drop into place depending on how many columns are left to fill.

I think it is just the way I am writing the @include. I have tried doing container/layout inside the breakpoint instead of with-layout with no success. I know this is probably going to be a simple fix that I am just not seeing.

Edit: Also something I have noticed is that no matter how I change things the div is always taking the default $susy map and is not changing it at breakpoint.

SCSS:

@import 'susy';
@import 'breakpoint';

$layout1: layout(12 .125 split fluid center);
$layout2: layout(16 .125 split fluid center);
$layout3: layout(24 .125 split fluid center);

.container {
  @include container;
  @include with-layout($layout1);
  background: orange;

    @include breakpoint(600px) {
      @include with-layout($layout2);
      background: red;
    }

    @include breakpoint(1000px) {
      @include with-layout($layout3);
      background: blue;
    }

}

.testbox {
  @include span(1);  
}

html:

<div class="container">

  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>

</div>
worlddev
  • 52
  • 1
  • 8
  • possible duplicate of [Using Sass Variables with CSS3 Media Queries](http://stackoverflow.com/questions/9122195/using-sass-variables-with-css3-media-queries) – cimmanon Jan 06 '15 at 12:38
  • no thats not the issue unfortunately. I can put layout(12/16/24) in there and replace the variables as well with no change. I thought showing this way would describe what I am trying best. – worlddev Jan 06 '15 at 20:44
  • Yes, it *is* the issue if you look at the the source of the mixins. All the with-layout mixin does is set variables. – cimmanon Jan 06 '15 at 20:49
  • even when I use zero variables tho I can not achieve a column change its children can recognize, I can however get colors and spans to change at breakpoints with no problem. I just dont know what command actually allows column change for the contents inside to follow by. I can get a 12 column layout to change to 24 but the divs inside will still see it as a 12 column. If you could provide a example of how I should do it that would be greatly appreciated, because I feel like I am blind right now. – worlddev Jan 06 '15 at 22:01
  • The way to get it to work is to put on the div span(1 of 6) then have breakpoint and say span(1 of 12). I noticed inside the css when I say span(1) it gives it a % value width, which doesn't change with breakpoints and this is causing the problem. For some reason I thought the span would change with the breakpoints and its new parent's layout. Is there another way of doing this without having to add breakpoint spans. – worlddev Jan 06 '15 at 22:21

1 Answers1

1

with-layout only changes the settings used for Susy mixins/functions nested inside it:

@include with-layout($layout2) {
  // code nested here will use the $layout2 settings
}

You have nothing nested inside any call to with-layout - therefor no changes. This is exactly what @cimmanon was trying to explain in the comments. Similarly, @media only changes things nested directly inside it — so your colors change fine, but your spans don't. The colors are actually nested, the spans aren't.

Because Sass is pre-processed, span(1) cannot have multiple outputs unless it is called multiple times. Right now you call it once, so it has one output. If you call it multiple times inside different layout contexts, you can get different outputs.

// This will give you different spans at different breakpoints:
@include breakpoint(600px) {
  @include with-layout($layout2) {
    @include span(1);
    background: red;
  }
}

// you can also use the susy-breakpoint shortcut:
@include susy-breakpoint(1000px, $layout3) {
  @include span(1);
  background: blue;
}
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Yeah I kept thinking span for some reason was a set value and tried every possible way without creating breakpoint spans. Thanks again guys, and thanks eric for all your work on susy. It is a amazing framework and will hopefully be contributing some cool things to it this year when I am a master :) – worlddev Jan 08 '15 at 01:21