2

Trying to figure out Susy and am having trouble positioning elements by location. ‘first’ and ‘last’ work as expected, but using the number of a specific column doesn't. Where am I going wrong?

.number {
  @include span(4 at 5);
}

see demo: http://sassmeister.com/gist/aad8a46d927b59573695

or full code:

  @import "susy";

  $susy: (
    flow: ltr, // ltr | rtl
    output: float, // float | isolate
    math: fluid, // fluid | static (requires column-width)
    column-width: false, // false | value
    container: 800px, // length or % | auto
    container-position: center, // left | center | right | <length> [*2] (grid padding)
    last-flow: to,
    columns: 12,
    gutters: .75,
    gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
    global-box-sizing: content-box, // content-box | border-box (affects inside/inside-static)
    debug: (
      image: show,
      color: rgba(#66f, .25),
      output: background, // background | overlay
      toggle: top right,
    ),
    use-custom: (
      background-image: true, // look for background-image mixin
      background-options: false, // look for background-size, -origin and -clip and other compass/bourbon mixins
      box-sizing: true, // look for custom bix sizing mixin
      clearfix: false, // true = look for internal clearfix before using micro clearfix
      rem: true, // look for rem mixin
    )
  );


  .page {
    @include container;
  }

  .row {
    @include full;
  }

  .first {
    @include span(4);
    background-color:pink;
  }

  .last {
  @include span(last 4);
  background-color:orange;
}

.number {
  @include span(4 at 5);
  background-color: wheat;
}


<div class="page">
    <div class="row">
      <div class="first">hooray I'm first</div>
      <div class="last">hooray I'm last</div>
    </div>
    <div class="row">
      <div class="number">boo I'm not at my specific location</div>
    </div>
</div>
pixeloco
  • 255
  • 3
  • 16
  • There needs to be enough code here in the question to reproduce the problem. Also, it is unclear what "doesn't work" means in this context (compiler error? red when it should be green? formats your hard drive? etc.). – cimmanon Sep 15 '14 at 21:45
  • 1
    @cimmanon please see demo link for fully coded example. "doesn't work" means the element does not position itself at the 5th column but instead stays flush left as shown in demo code. – pixeloco Sep 15 '14 at 23:11
  • That's not how SO works. Again, there needs to be enough code here in the question to reproduce the problem. Links rot, this question won't be useful to anyone once your demo is gone. – cimmanon Sep 16 '14 at 01:17
  • 1
    well my apologies as linking to a fiddle (or in this case a sass supporting equivalent) has sufficed every other time i have posted and in almost every thread i've read. – pixeloco Sep 16 '14 at 12:19

1 Answers1

2

Just realized my error (in case anyone else needs it): the 'at' keyword only works with isolate output and my grid is set to float. To fix you can change float to isolate in the overall settings, or apply it directly to the element in question.

.number {
  @include span(isolate 4 at 5);
}

http://sassmeister.com/gist/42d1efaf1ddd9c721379

pixeloco
  • 255
  • 3
  • 16
  • Had exactly the same thing happening to me, thank you for your solution. Just started with Susy and this is an obvious beginner misperception of the use of the `at` flag. – lowtechsun Mar 23 '17 at 10:45
  • Also the confusion mainly arose from having watched [this video tutorial from LevelUpTuts](https://leveluptutorials.com/tutorials/susy-tutorials/creating-a-basic-grid) actually meant for beginners. [Check this gist](http://www.sassmeister.com/gist/7377075431bc90ba2bf23a554a00261d) to see that with the settings from the video as well as what you did, the `at` flag only works with the isolate setting on. – lowtechsun Mar 23 '17 at 11:39
  • I came to believe that the `at` flag could be used [like in this video tutorial from LevelUpTuts about Susy](https://leveluptutorials.com/tutorials/susy-tutorials/creating-a-basic-grid). By chance `4 at 9 of 12` works out on the sidebar, (starting 6min18sec in video) as the `sidebar` is exactly as wide as the remainder of the column. Similar thing with your question. Once any other value for the remaining column is chosen `at` [will not work](http://www.sassmeister.com/gist/7377075431bc90ba2bf23a554a00261d) except with the `output:isolate` global or `span(isolate ..)` settings. – lowtechsun Mar 23 '17 at 13:01